boss_app/pages/index/index.vue

<template>
<view style="height:calc(100vh - var(--window-bottom))">
    <div style="background:#fff">
        <div class="home-box">
            <div class="select-top">
                <uni-data-select style="width:auto;border: none;flex: none;" :clear="false" v-model="hotelIds" :localdata="range" @change="change"></uni-data-select>
            </div>
            <div class="grid-data">
                <div>
                    <div>今日总收款/元</div>
                    <div style="font-size: 18px;">{{todayTotalIncome}}</div>
                </div>
                <div>
                    <div>在住/空置</div>
                    <div style="font-size: 18px;">{{roomData.checkInRoomData}}/{{roomData.allRoomData - roomData.checkInRoomData}}</div>
                </div>
                <div>
                    <div>入住率</div>
                    <div style="font-size: 18px;">{{((roomData.checkInRoomData/roomData.allRoomData) || 0).toFixed(2)}}%</div>
                </div>
                <div>
                    <div>今日总收入/元</div>
                    <div style="font-size: 18px;">{{todayIncome.reduce((pre, cur) => pre+cur.amount,0 ) || 0}}</div>
                </div>
                <div>
                    <div>平均房价/元</div>
                    <div style="font-size: 18px;">{{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 class="card">
                <div style="display:flex;justify-content:flex-end;align-items:center;">
                    <u-icon name="arrow-right"></u-icon>
                </div>
                <div class="card-data">
                    <div @click="roomOrders(1)">
                        <div style="font-size: 20px; font-weight: 600;">{{roomData.todayLeaveRoomData}}</div>
                        <div style="font-size: 12px;">今日预离</div>
                    </div>
                    <div @click="handleToPredetemine(1)">
                        <div style="font-size: 20px; font-weight: 600;">{{roomData.todayArriveRoomData}}</div>
                        <div style="font-size: 12px;">今日预抵</div>
                    </div>
                    <div>
                        <div style="font-size: 20px; font-weight: 600;">{{roomData.todayArrearsRoomData}}</div>
                        <div style="font-size: 12px;color:red">欠费</div>
                    </div>
                    <div>
                        <div style="font-size: 20px; font-weight: 600;">{{roomData.dirtyRoomData}}</div>
                        <div style="font-size: 12px;">脏房</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid-tabbar">
            <div v-for="(item, index) in tabbarList" @click="handleToPage(item)" :key="index" style="display:flex;flex-direction:column;align-items:center">
                <image :src="item.icon" style="width:30px;height:30px;" />
                <div>{{item.name}}</div>
            </div>
        </div>
        <div class="notice">
            公告<span style="border-right:3px solid rgb(255, 141, 26);margin:0 5px"></span>公告内容公告内容公告内容公告内容
        </div>
    </div>

    <div class="content-card">
        <div class="content-card-top">
            <div>
                <span>今日收入</span>/元
            </div>
            <div @click="handleToIncome">
                <u-icon name="arrow-right"></u-icon>
            </div>
        </div>
        <div class="content-card-btm">
            <div v-for="(item, index) in todayIncome" :key="index">
                <div>{{item.amount}}</div>
                <div>{{item.name}}</div>
            </div>
        </div>
    </div>

    <div class="content-card">
        <div class="content-card-top">
            <div>
                <span>收款方式</span>/元
            </div>
            <div @click="handleToBusinessAnalysis">
                <u-icon name="arrow-right"></u-icon>
            </div>
        </div>
        <div class="content-card-btm">
            <div v-for="(item, index) in paymentMethod" :key="index">
                <div>{{item.amount}}</div>
                <div>{{item.name}}</div>
            </div>
            <!-- <div>
                <div>35280.00</div>
                <div>微信</div>
            </div>
            <div>
                <div>7890.00</div>
                <div>支付宝</div>
            </div> -->
        </div>
    </div>

    <div class="content-card">
        <div class="content-card-top">
            <div>
                <span>在住来源</span>/间
            </div>
            <div @click="toBusiness">
                <u-icon name="arrow-right"></u-icon>
            </div>
        </div>
        <div class="content-card-btm">
            <div v-for="(item, index) in staySource" :key="index">
                <div>{{item.count}}</div>
                <div>{{item.name}}</div>
            </div>
            <!-- <div>
                <div>123</div>
                <div>美团</div>
            </div>
            <div>
                <div>123</div>
                <div>携程</div>
            </div>
            <div>
                <div>123</div>
                <div>飞猪</div>
            </div> -->
        </div>
    </div>

    <div class="content-card">
        <div class="content-card-top">
            <div>
                <span>房态</span>/间
            </div>
            <div @click="toRoomType">
                <u-icon name="arrow-right"></u-icon>
            </div>
        </div>
        <div class="content-card-btm">
            <div v-for="(item, index) in roomStatus" :key="index">
                <div>{{item.count}}</div>
                <div>{{item.name}}</div>
            </div>
            <!-- <div>
                <div>123</div>
                <div>住脏</div>
            </div>
            <div>
                <div>123</div>
                <div>空净</div>
            </div>
            <div>
                <div>123</div>
                <div>空脏</div>
            </div>
            <div>
                <div>123</div>
                <div>维修</div>
            </div> -->
        </div>
    </div>

    <div class="content-card" v-if="true">
        <div class="content-card-top">
            <div>
                <span>收支情况</span>/元
                <uni-data-select style="width:80px;border: none;flex: none;" :clear="false" v-model="incomeValue" :localdata="incomeRange" @change="incomeChange"></uni-data-select>
            </div>
            <div @click="toIncomeDetail">
                <u-icon name="arrow-right"></u-icon>
            </div>
        </div>
        <div class="content-card-btm">
            <div>
                <div>{{incomeAndExpenditure.reduce((pre, cur)=> pre+cur.money,0)}}</div>
                <div>收入</div>
            </div>
            <div>
                <div>{{incomeAndExpenditure.reduce((pre, cur)=> pre+cur.zc_money,0)}}</div>
                <div>支出</div>
            </div>
            <div>
                <div>{{incomeAndExpenditure.reduce((pre, cur)=> pre+cur.jy_money,0)}}</div>
                <div>结余</div>
            </div>
        </div>
    </div>
    <div class="content-card" v-if="false">
        <div class="content-card-top">
            <div>
                <span>收支一览</span>/元
                <uni-data-select style="width:80px;border: none;flex: none;" :clear="false" v-model="incomeValue" :localdata="incomeRange" @change="generalChange"></uni-data-select>
            </div>
            <div>></div>
        </div>
        <div class="">
            <LineCharts />
        </div>
    </div>
    <div style="height:100px;">

    </div>
    <div style="width:100vw;height:var(--window-bottom);"></div>
</view>
</template>

<script>
import LineCharts from '../../components/echarts/line.vue';
import {
    getHotelList,
    getRevPAR,
    getTodayIncome,
    getTodayTotalIncome,
    getStaySource,
    getRoomStatus,
    getIncomeAndExpenditure
} from '../../utils/api.js';
import {
    mapState
} from 'vuex';
export default {
    components: {
        LineCharts
    },
    data() {
        return {
            // value: 0,
            range: [{
                    value: 0,
                    text: "全部"
                },
                {
                    value: 1,
                    text: "沙县大酒店"
                },
                {
                    value: 2,
                    text: "游泳"
                },
            ],
            incomeRange: [{
                    value: 1,
                    text: "近七日"
                },
                {
                    value: 2,
                    text: "本月"
                },
                {
                    value: 3,
                    text: "近半年"
                },
                {
                    value: 4,
                    text: "本年度"
                },
            ],
            incomeValue: 1,
            tabbarList: [{
                    name: '退房',
                    icon: '../../static/alisvg/tuifang1.svg',
                },
                {
                    name: '审核',
                    icon: '../../static/alisvg/shenhe.svg',
                },
                {
                    name: '客房服务',
                    icon: '../../static/alisvg/wodekefu.svg',
                },
                {
                    name: '预定',
                    icon: '../../static/alisvg/yuding.svg',
                },
                {
                    name: '记账本',
                    icon: '../../static/alisvg/jizhangben.svg',
                },
                {
                    name: '财务报表',
                    icon: '../../static/alisvg/jurassic_report-caiwu.svg',
                },
                {
                    name: '经营分析',
                    icon: '../../static/alisvg/jingyingfenxi.svg',
                },
                {
                    name: '客单',
                    icon: '../../static/alisvg/24gf-building2.svg',
                },
                {
                    name: 'POS消费',
                    icon: '../../static/alisvg/24gl-cart4.svg',
                },
                {
                    name: '更多',
                    icon: '../../static/alisvg/gengduo.svg',
                },
                {
                    name: '交接班',
                    icon: '../../static/alisvg/qiehuan2.svg',
                },
                {
                    name: '商品订单',
                    icon: '../../static/alisvg/24gf-cart4.svg',
                },
                {
                    name: '远期房态',
                    icon: '../../static/alisvg/ico_jiudianguanli_yuanqifangtai.svg',
                },
                {
                    name: '异动表',
                    icon: '../../static/alisvg/24gf-bag.svg',
                },
                {
                    name: '收支明细',
                    icon: '../../static/alisvg/jurassic_report-caiwu.svg',
                }
            ],
            RevPAR: 0,
            hotelIds: 0,
            // housingPrices: 0, //平均房价
            todayIncome: [{
                    name: '押金',
                    amount: 0
                },
                {
                    name: '房费',
                    amount: 0
                },
                {
                    name: '商品',
                    amount: 0
                }
            ], //今日收入统计
            todayTotalIncome: 0, //今日总收款
            roomData: {
                //房间总数
                allRoomData: 0,
                //入住总数
                checkInRoomData: 0,
                //平均房价
                housingPrices: 0,
                // 今日预离
                todayLeaveRoomData: 0,
                //今日预抵
                todayArriveRoomData: 0,
                //今日欠费
                todayArrearsRoomData: 0,
                //脏房
                dirtyRoomData: 0,

            },
            //收款方式
            paymentMethod: [{
                    name: '现金',
                    amount: 0
                },
                {
                    name: '微信',
                    amount: 0
                },
                {
                    name: '支付宝',
                    amount: 0
                }
            ],
            //在住来源
            staySource: [{
                    name: '散客',
                    count: 0
                },
                {
                    name: '美团',
                    count: 0
                }
            ],
            //房态统计
            roomStatus: [{
                    name: '住净',
                    count: 0
                },
                {
                    name: '住脏',
                    count: 0
                },
                {
                    name: '空净',
                    count: 0
                },
                {
                    name: '空脏',
                    count: 0
                },
                {
                    name: '维修',
                    count: 0
                },
            ],
            //收支情况
            incomeAndExpenditure: [],
        };
    },
    computed: {
        ...mapState({
            hotelIdList: state => state.hotelIdList,
            hotelId: state => state.hotelId
        }),
        IncomeAndExpenditure(){

        }
    },
    watch: {
        hotelIdList(newVal) {
            console.log(newVal);
            this.range = newVal.map(item => ({
                value: item.id,
                text: item.name
            }))
        }
    },
    async mounted() {
        // this.onload()
        await this.getHotel();
        this.onload()

    },
    methods: {
        //获取酒店数据
        async getHotel() {
            let data = await getHotelList()
            if (data.code == 200) {
                this.$nextTick(() => {
                    this.$store.commit('setHotelIdList', data.result.records)
                    this.hotelIds = data.result.records[0].id
                    this.$store.commit('setHotelId', data.result.records[0].id)
                })
            }
            return data
        },
        onload() {
            let str = new Date().toLocaleDateString()
            //后一天
            let end = new Date(new Date().getTime() + 24 * 60 * 60 * 1000).toLocaleDateString()
            str = str.replace(/\//g, '-')
            end = end.replace(/\//g, '-')

            // 房间数据统计
            getRevPAR().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().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
                        }
                    ]
                }
            })

            //今日总收款
            getTodayTotalIncome({
                startTime: str,
                endTime: end
            }).then(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
                }
            })

            //在住来源
            getStaySource().then(res => {
                if (res.code == 200 && res.result.length > 0) {
                    this.staySource = res.result
                    // console.log('%cindex.vue line:463 this.staySource', 'color: white; background-color: #007acc;', this.staySource);
                }
            })

            getRoomStatus().then(res => {
                if (res.code == 200 && res.result.length > 0) {
                    this.roomStatus = res.result
                } else {
                    this.roomStatus = [{
                            name: '住净',
                            count: 0
                        },
                        {
                            name: '住脏',
                            count: 0
                        },
                        {
                            name: '空净',
                            count: 0
                        },
                        {
                            name: '空脏',
                            count: 0
                        },
                        {
                            name: '维修',
                            count: 0
                        },
                    ]
                }
            })
            this.getIncomeAndExpenditure(this.incomeValue)

        },
        /**
         * 获取收支情况
         */
        getIncomeAndExpenditure(section){
            getIncomeAndExpenditure({section:section}).then(res=>{
                console.log(res);
                if (res.code == 200) {
                    this.incomeAndExpenditure = res.result
                }
            })
        },
        
        change(e) {
            console.log("e:", e);
            this.hotelIds = e
            this.$store.commit('setHotelId', e)
            this.onload()
        },
        roomOrders(idx) {
            uni.navigateTo({
                url: `/pages/roomOrders/roomOrders?current=${idx}`
            })
        },
        handleToPredetemine(idx) {
            uni.navigateTo({
                url: `/pages/predetermine/predetermine?current=${idx}`
            })
        },
        handleToPage(e) {
            console.log(e);
            if (e.name == '远期房态') {
                uni.navigateTo({
                    url: '/components/longTermHousingStatus/longTermHousingStatus'
                })
            }
            if (e.name == '客单') {
                this.roomOrders(0)
            }
            if (e.name == '预定') {
                this.handleToPredetemine(0)
            }
            if (e.name == '经营分析') {
                uni.navigateTo({
                    url: '/components/businessAnalysis/businessAnalysis'
                })
            }
            if (e.name == '收支明细') {
                uni.navigateTo({
                    url: '/components/incomeDetail/incomeDetail'
                })
            }
            if (e.name == '客房服务') {
                uni.navigateTo({
                    url: '/components/roomService/roomService'
                })
            }
        },
        handleToIncome(){
            uni.navigateTo({
                url: '/components/incomeDetail/incomeDetail'
            })
        },
        handleToBusinessAnalysis(){
            uni.navigateTo({
                url: `/components/businessAnalysis/businessAnalysis?current=${1}`
            })
        },
        toBusiness(){
            uni.navigateTo({
                url: `/components/businessAnalysis/businessAnalysis?current=${4}`
            })
        },
        toRoomType(){
            uni.switchTab({
            	url:'/pages/roomStateDiagram/roomStateDiagram'
            })
        },
        toIncomeDetail(){
            uni.navigateTo({
                url: '/components/incomeDetail/incomeDetail'
            })
        },
        incomeChange(e) {
            console.log("e:", e);
            console.log(this.incomeValue);
            // this.
            this.getIncomeAndExpenditure(e)
        },
        generalChange(e) {
            console.log("e:", e);
        }
    },
};
</script>

<style lang="scss" scoped>
page {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    z-index: -20 !important;
}

.home-box {
    // height: 200px;
    // width: 200px;
    background-color: rgb(0, 186, 173);
    border-radius: 0 0 20% 20%;
}

.select-top {
    // width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;

    /deep/.uni-select {
        border: none !important;
        text-align: center;
    }

    /deep/.uni-select__input-text {
        color: #fff;
    }
}

.card {
    width: 80%;
    height: 100px;
    background-color: #fff;
    border: 1px solid rgb(0, 186, 173);
    margin: auto;
    border-radius: 5px;
    //阴影
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-top: 10px;
    // padding: 10px;
    display: flex;
    flex-direction: column;
}

.card-data {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex: 1;

    >div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 25%;
        height: 45px;
    }
}

.grid-data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 30px 10px;
    color: #fff;
}

.grid-data>div {
    /* background-color: #fff; */
    /* border: 1px solid #eee; */
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    height: 50px;
    font-size: 12px;
}

.grid-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
    background: #fff;
}

// .bgco {
//     position: fixed;
//     background-color: rgb(0, 186, 173);
//     height: 250px;
//     width: 100%;
//     z-index: -1;
//     top: 0;
//     border-bottom-left-radius: 20%;
//     border-bottom-right-radius: 20%;
// }

.notice {
    border-top: 1px solid #00000040;
    margin-top: 10px;
    padding: 10px;
    border-bottom: 1px solid #000;
    background: #fff;
}

.content-card {
    margin-top: 5px;
    background: #fff;
    border-bottom: 1px solid #000;

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

        // border-bottom: 1px solid #00000040;
        div:nth-child(1) {
            display: flex;
            align-items: center;
            // justify-content: center;
            width: 200px;

            span {
                font-size: 18px;
                font-weight: bold;
            }
        }

        >div {
            >span {
                font-size: 18px;
                font-weight: bold;
            }
        }
    }

    .content-card-btm {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10px;
        height: 45px;

        >div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            height: 100%;

            div:nth-child(2) {
                font-size: 12px;
            }
        }
    }
}
</style>