boss_app/components/businessAnalysis/businessAnalysis.vue

<template>
<view>
    <Header :borbtm="false" @change="headerChange">
        <template #search>
            <u-subsection :list="list" mode="subsection" :current="current" @change="topChange"></u-subsection>
        </template>
        <template #section>

        </template>
    </Header>
    <div style="display:flex;padding:10px;">
        <uni-data-select :clear="false" v-model="timeCheck" :localdata="rangeTime" @change="changeTime"></uni-data-select>
        <uni-data-select :clear="false" v-model="dayCheck" :localdata="rangeDay" @change="changeDay"></uni-data-select>
        <div @click="show = true" class="calendar">{{`${startTime} ~ ${endTime}`}}</div>
    </div>
    <u-calendar closeOnClickOverlay :show="show" mode="range" @close="close" @confirm="confirm"></u-calendar>

    <div class="content-detail">
        <div class="content-detail-top">
            <div>
                <div>
                    总营业额/元
                </div>
                <div>
                    {{todayTotalIncome}}元
                </div>
            </div>
            <div v-if="currentWay == 1">
                <div>
                    实收
                </div>
                <div>
                    {{todayIncome.reduce((pre, cur) => pre+cur.amount,0 ) || 0}}元
                </div>
            </div>
            <div v-if="currentWay == 1">
                <div>
                    欠款（预付）/元
                </div>
                <div>
                    {{roomData.todayArrearsRoomData}}
                </div>
            </div>
        </div>
        <div class="content-detail-bottom">
            <!-- <div>
                <div>间夜数</div>
                <div>1234</div>
            </div> -->
            <div>
                <div>入住率</div>
                <div>{{((roomData.checkInRoomData/roomData.allRoomData) || 0).toFixed(2)}}%</div>
            </div>
            <div>
                <div>平均房价/元</div>
                <div>{{roomData.housingPrices}}</div>
            </div>
            <div>
                <div>RevPAR</div>
                <div v-if="roomData.checkInRoomData/roomData.allRoomData!=0 && roomData.allRoomData!=0" style="font-size: 18px;">{{((roomData.housingPrices*roomData.allRoomData)/(roomData.checkInRoomData/roomData.allRoomData).toFixed(2)).toFixed(2)}}</div>
                <div v-else style="font-size: 18px;">{{0}}</div>
            </div>
        </div>
    </div>

    <!-- 支付方式 -->
    <u-subsection v-if="currentWay==1" style="margin-top:20px;width:35vw;" :list="payMethodsList" mode="subsection" :current="currentPayMethods" @change="PayChange"></u-subsection>

    <u-subsection style="margin-top:20px;" :list="listWay" mode="subsection" :current="currentWay" @change="WayChange"></u-subsection>

    <!-- table表格 -->
    <!-- 按时间 -->
    <Time :tableData="tableData" v-if="currentWay==0" />
    <!-- 按收款方式 -->
    <PayMethodsVue :tableData="tableData" v-if="currentWay==1" />
    <!-- 按房型 -->
    <RoomTypeVue :tableData="tableData" v-if="currentWay==2" />
    <!-- 按费项 -->
    <FeeItemsVue :tableData="tableData" v-if="currentWay==3" />
    <!-- 按来源 -->
    <SourceVue :tableData="tableData" v-if="currentWay==4" />
    <!-- 按客型 -->
    <CustomerTypeVue :tableData="tableData" v-if="currentWay==5" />
    <!-- 按入住类型 -->
    <OccupancyTypeVue :tableData="tableData" v-if="currentWay==6" />

</view>
</template>

<script>
import Header from '../header.vue'
import PayMethodsVue from '../tableCharts/payMethods.vue'
import RoomTypeVue from '../tableCharts/roomType.vue'
import Time from '../tableCharts/time.vue'
import FeeItemsVue from '../tableCharts/feeItems.vue'
import SourceVue from '../tableCharts/source.vue'
import CustomerTypeVue from '../tableCharts/customerType.vue'
import OccupancyTypeVue from '../tableCharts/occupancyType.vue'

import {
    getDataList,
    getShouKuanList,
    getFangXingList,
    getFeiXiangList,
    getLaiYuanList,
    getKeXingList,
    getRuZhuList
} from '../../utils/businessAnalysisApi'
import {
    getHotelList,
    getRevPAR,
    getTodayIncome,
    getTodayTotalIncome,
    getStaySource,
    getRoomStatus,
    getIncomeAndExpenditure
} from '../../utils/api.js';

export default {
    components: {
        Header,
        Time,
        PayMethodsVue,
        RoomTypeVue,
        FeeItemsVue,
        SourceVue,
        CustomerTypeVue,
        OccupancyTypeVue
    },
    data() {
        return {
            list: ['收入统计', '支出统计'],
            listWay: ['按时间', '按收款方式', '按房型', '按费项', '按来源', '按客型', '按入住类型'],
            payMethodsList: ['查看营业额', '查看实收'],
            current: 0,
            currentWay: 0,
            currentPayMethods: 0,
            rangeTime: [{
                    value: 1,
                    text: "按日"
                },
                {
                    value: 2,
                    text: "按月"
                },
                {
                    value: 3,
                    text: "按季度"
                },
                {
                    value: 4,
                    text: "按年"
                },
            ],
            rangeDay: [{
                    value: 0,
                    text: "按营业日"
                },
                {
                    value: 1,
                    text: "按自然日"
                }
            ],
            timeCheck: 1,
            dayCheck: 0,
            startTime: (new Date().toLocaleDateString()).replace(/\//g, '-'),
            endTime: (new Date(new Date().getTime() + 24 * 60 * 60 * 1000).toLocaleDateString()).replace(/\//g, '-'),
            show: false,
            tableData: [], //表格数据
            todayTotalIncome: 0, //今日总收款
            roomData: {
                //房间总数
                allRoomData: 0,
                //入住总数
                checkInRoomData: 0,
                //平均房价
                housingPrices: 0,
                // 今日预离
                todayLeaveRoomData: 0,
                //今日预抵
                todayArriveRoomData: 0,
                //今日欠费
                todayArrearsRoomData: 0,
                //脏房
                dirtyRoomData: 0,
            },
            todayIncome:[],
        }
    },
    onLoad(options) {
        console.log(options.current);
        if (options.current) {
            this.currentWay = options.current
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        topChange(e) {
            this.current = e
        },
        changeTime(e) {
            console.log(e);
            this.timeCheck = e
            this.getData()
        },
        changeDay(e) {
            this.dayCheck = e
        },

        /**
         * 日期选择确认
         */
        confirm(e) {
            this.show = false
            this.timeList = e
            this.startTime = e[0].replace(/\//g, '-')
            this.endTime = e[e.length - 1].replace(/\//g, '-')
        },

        /**
         * 日期选择取消
         */
        close() {
            this.show = false
        },

        WayChange(e) {
            this.currentWay = e
            this.tableData = []
            this.getData()
        },
        PayChange(e) {
            this.currentPayMethods = e
        },
        getData(all = false) {
            // console.log(this.startTime);
            this.startTime = this.startTime.replace(/\//g, '-')
            this.endTime = this.endTime.replace(/\//g, '-')

            getTodayTotalIncome({
                startTime: this.startTime,
                endTime: this.endTime
            }).then(res => {
                console.log(res);
                if (res.code == 200 && res.result.records.length > 0) {
                    let brr = []
                    let data = res.result.records
                    data.forEach(item => {
                        let arr = []
                        arr = Object.keys(item).filter(items => items != 'department' && items != 'hotel_name')
                        brr = Object.keys(item).filter(items => items == '现金' || items == '微信' || items == '支付宝')
                        console.log(arr);
                        arr.forEach(ele => {
                            this.todayTotalIncome += item[ele] * 1
                        })
                    })
                    let obj = {}
                    let copy = []
                    brr.forEach((item, i) => {
                        console.log(obj);
                        copy.push({
                            name: item,
                            amount: data.reduce((pre, cur) => {
                                return pre + cur[item]
                            }, 0)
                        })
                    })
                    // this.paymentMethod = copy
                    // console.log('2222222222', copy);
                    // console.log(this.todayTotalIncome);
                } else {
                    this.todayTotalIncome = 0
                }
            })
            // 房间数据统计
            getRevPAR({
                startTime: this.startTime,
                endTime: this.endTime
            }).then(res => {
                if (res.code == 200 && res.result.length > 0) {
                    this.roomData.allRoomData = res.result[0]
                    this.roomData.checkInRoomData = res.result[1]
                    this.roomData.housingPrices = res.result[2]
                    this.roomData.todayLeaveRoomData = res.result[3]
                    this.roomData.todayArriveRoomData = res.result[4]
                    this.roomData.todayArrearsRoomData = res.result[5]
                    this.roomData.dirtyRoomData = res.result[6]
                }
            })

            //今日收入统计
            getTodayIncome({
                startTime: this.startTime,
                endTime: this.endTime
            }).then(res => {
                if (res.code == 200 && res.result.length > 0) {
                    console.log(res.result);
                    this.todayIncome = res.result
                } else {
                    this.todayIncome = [{
                            name: '押金',
                            amount: 0
                        },
                        {
                            name: '房费',
                            amount: 0
                        },
                        {
                            name: '商品',
                            amount: 0
                        }
                    ]
                }
            })

            if (this.currentWay == 0 || all) {
                getDataList(this.startTime, this.endTime, this.timeCheck).then(res => {
                    console.log(res);
                    if (res.code == 200 && res.result) {
                        this.tableData = res.result
                    } else {
                        this.tableData = []
                    }
                })
            }
            if (this.currentWay == 1 || all) {
                getShouKuanList(this.startTime, this.endTime).then(res => {
                    console.log(res);
                    if (res.code == 200 && res.result) {
                        this.tableData = res.result
                    }
                })
            }
            if (this.currentWay == 2 || all) {
                getFangXingList(this.startTime, this.endTime).then(res => {
                    console.log(res);
                    if (res.code == 200 && res.result) {
                        this.tableData = res.result
                    }
                })
            }
            if (this.currentWay == 3 || all) {
                getFeiXiangList(this.startTime, this.endTime).then(res => {
                    console.log(res);
                    if (res.code == 200 && res.result) {
                        this.tableData = res.result
                    }
                })
            }
            if (this.currentWay == 4 || all) {
                getLaiYuanList(this.startTime, this.endTime).then(res => {
                    console.log(res);
                    if (res.code == 200 && res.result) {
                        this.tableData = res.result
                    }
                })
            }
            if (this.currentWay == 5 || all) {
                getKeXingList(this.startTime, this.endTime).then(res => {
                    console.log(res);
                    if (res.code == 200 && res.result) {
                        this.tableData = res.result
                    }
                })
            }
            if (this.currentWay == 6 || all) {
                getRuZhuList(this.startTime, this.endTime).then(res => {
                    console.log(res);
                    if (res.code == 200 && res.result) {
                        this.tableData = res.result
                    }
                })
            }

        },
        headerChange() {
            this.getData()
        }
    }
}
</script>

<style lang="scss" scoped>
.pages {
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
}

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

.content-detail {
    background: #409EFF;
    padding: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 10px #000;
    color: #fff;
    height: 130px;
    justify-content: space-between;

    .content-detail-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex: 1;
        }
    }

    .content-detail-bottom {
        display: flex;
        justify-content: space-between;

        div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex: 1;
            font-size: 16px;
        }
    }
}
</style>