sagacloud-sagacare-weChat/src/packagesEnv/pages/officehome/index.wpy

<style lang="less">
page {
    height: 100%;
    background-color: #f7f8fa;
}

.map-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    z-index: 1;
}
.pageBottom {
    display: flex;
    align-items: flex-end;
    height: 1000rpx;
    .log-text {
        display: block;
        margin: 0 auto;
        width: 176rpx;
        height: 40rpx;
        padding: 98rpx 0 80rpx;
    }
}

/deep/ .van-transition {
    background: red;
}
.navFixed {
    position: fixed;
    top: 104rpx;
    left: 0;
    right: 0;
    background: #ffffff;
}
.bg-img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #f7f8fa;
}
.roomImgWrap {
    position: absolute;
    left: 0;
    right: 0;
    top: -185px;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    width: 662rpx;
    height: 185px;
    margin: 0 auto;
    background: #fff;
    padding: 5px 5px 0;
    box-sizing: border-box;
    overflow: hidden;
    .room-img {
        border-top-left-radius: 40rpx;
        border-top-right-radius: 40rpx;
        width: 100%;
        height: 100%;
    }
}

.opacityTrans {
    opacity: 0;
}
.office-header {
    position: absolute;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.596637);
    width: 42px;
    height: 32px;
    border-radius: 32px;
    margin-left: 10px;
}
.my-class:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.g-fl {
    display: flex;
    justify-content: center;
    align-items: center;
}
.g-fl-c {
    flex-direction: column;
}
.overflow-wrap {
    width: 100%;
    height: 100%;
    scroll-view {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
}
.overflowclass {
    height: 100%;
    overflow: hidden;
}
.move-wrap {
    width: 100%;
    background: #f7f8fa;
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
}

.maproom-detail {
    width: 750rpx;
    margin-left: -45rpx;
    height: 125px;
    position: relative;
    background: #fff;
    border-bottom: 10rpx solid #ffffff;
    box-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, 0.07),
        0px 8rpx 20rpx rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;

    .office-room-info {
        position: relative;
    }
    .room-envlist {
        justify-content: space-around;
        .env-name {
            font-family: Montserrat;
            font-weight: 600;
            font-size: 24rpx;
            line-height: 30rpx;
            color: #c4c4c4;
        }
        .env-num {
            font-family: Montserrat;
            font-size: 48rpx;
            line-height: 58rpx;
            text-align: center;
            color: #1b144e;
        }
        .env-level {
            font-family: PingFang SC;
            font-size: 20rpx;
            line-height: 28rpx;
            color: #bab8c7;
        }
    }
    .upToSpace {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 24rpx;
        .imgSt {
            width: 24rpx;
            height: 24rpx;
        }
        .text {
            color: #8b949e;
            font-family: PingFang SC;
            font-size: 24rpx;
            font-style: normal;
            font-weight: 400;
            line-height: 40rpx;
        }
    }
}

.office-container {
    width: 662rpx;
    margin: 0 auto;
}
.room-detail {
    position: relative;
    width: 100%;
    background: #ffffff;
    margin-bottom: 15px;
    box-sizing: border-box;
    box-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, 0.07),
        0px 8rpx 20rpx rgba(0, 0, 0, 0.05);
    border-bottom-left-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    .sceneBox {
        height: 92px;
        box-sizing: border-box;
        border-top: 1px solid rgba(196, 196, 196, 0.4);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 40rpx;
        .eachScene {
            width: 180rpx;
            height: 116rpx;
            background: rgba(159, 183, 205, 0.15);
            border-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            &.selScene {
                background: rgba(61, 203, 204, 0.3);
            }
            &.firstScene {
                width: auto;
                margin-right: 18rpx;
                flex-grow: 1;
            }
            image {
                width: 40rpx;
                height: 40rpx;
                margin-right: 18rpx;
            }
        }
    }

    .office-room-info {
        position: relative;
        // background:                                                                                                                                                                                                                                                                                          #fff;
    }
    .room-envlist {
        justify-content: space-around;
        padding-bottom: 32rpx;
        .env-name {
            font-family: Montserrat;
            font-weight: 600;
            font-size: 24rpx;
            line-height: 30rpx;
            color: #c4c4c4;
        }
        .env-num {
            font-family: Montserrat;
            font-size: 48rpx;
            line-height: 58rpx;
            text-align: center;
            color: #1b144e;
        }
        .env-level {
            font-family: PingFang SC;
            font-size: 20rpx;
            line-height: 28rpx;
            color: #bab8c7;
        }
    }
}

.nav-shadow {
    // box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1)                                                                                                                                                                                                                                                          ;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.navBox {
    position: fixed;
    bottom: 30px;
    left: 20rpx;
    right: 20rpx;
    z-index: 2;
    height: 96rpx;
    box-sizing: border-box;
    padding: 0 40rpx 0 20rpx;
    border-radius: 96rpx;
    font-size: 28rpx;
    background: #ffffff;
    box-shadow: 0px 0px 2rpx rgba(0, 0, 0, 0.15),
        0px 8rpx 6rpx rgba(0, 0, 0, 0.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .eq-nav {
        flex: 1;
        box-sizing: border-box;
        padding-right: 76rpx;
        display: flex;
        justify-content: space-around;
        .nav-item {
            width: 58rpx;
            .nav-text {
                position: relative;
                font-family: PingFang SC;
                font-size: 28rpx;
                font-weight: 400;
                line-height: 44rpx;
                color: #626c78;
            }
        }
        .nav-item-active {
            .nav-text {
                font-weight: 600;
                color: #1b2129;
            }
            .nav-text::after {
                content: '';
                position: absolute;
                bottom: 0px;
                left: 50%;
                transform: translateX(-50%);
                display: inline-block;
                width: 20rpx;
                height: 4rpx;
                border-radius: 4px;
                background: #3dcbcc;
            }
        }
    }
    .map-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 208rpx;
        height: 64rpx;
        border-radius: 32rpx;
        gap: 8rpx;
        background: #ebeef5;
        image {
            width: 40rpx;
            height: 40rpx;
        }
    }
}
.top-nav {
    position: fixed;
    top: 72px;
    z-index: 4;
    background: #f7f8fa;
    padding: 6rpx 45rpx 0;
    padding-bottom: 10rpx;
    box-sizing: border-box;
}
.popup-box {
    padding: 40rpx 46rpx;
}
.scene-popup {
    width: 520rpx;
    height: 860rpx;
    background: linear-gradient(0deg, #fff 720rpx, #f3f3f3 140rpx);
    &.air-popup {
        width: 560rpx;
        height: 720rpx;
        background: linear-gradient(
            0deg,
            #fff 580rpx,
            rgba(243, 243, 243, 1) 140rpx
        );
    }
    .scene-popup-head {
        padding-top: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 38rpx;
        .head-imgbg {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 140rpx;
            height: 140rpx;
            background: #f0da21;
            border-radius: 50%;
            margin-bottom: 30rpx;
            &.grey {
                background: rgba(196, 196, 196, 1);
            }
            &.blue {
                background: rgba(94, 139, 207, 1);
            }
            &.red {
                background: rgba(229, 87, 79, 1);
            }
            .air-head-imgbox {
                width: 72rpx;
                height: 72rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .head-imgbox {
                width: 40rpx;
                height: 40rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
.allclose-popup {
    height: auto;
    padding-bottom: 60rpx;
    .scene-popup-head {
        // height: 340rpx                                                                                                                                                                                                                                                                                       ;
        box-sizing: border-box;
        background: linear-gradient(180deg, #f3f3f3 60px, #fff 60px);
        padding-bottom: 80rpx;
    }
    .head-imgbg {
        // margin-bottom: 40rpx                                                                                                                                                                                                                                                                                 ;
    }
    .head-title {
        padding: 0 50rpx;
        text-align: center;
    }
    .close-popup-body {
        padding-left: 72rpx;
        height: 80px;
        box-sizing: border-box;
        padding-right: 20rpx;
        .close-item {
            font-style: normal;
            font-size: 28rpx;
            color: #c4c4c4;
            margin-bottom: 18rpx;
            display: flex;
            .close-pic {
                width: 20px;
                text-align: center;
            }
            .passIcon {
                color: #07c160;
                vertical-align: middle;
            }
            .pointer {
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 8px;
                background: #f0da21;
            }
        }
        .allclose-btns {
            padding-top: 20rpx;
        }
    }
}
.btns {
    display: flex;
    position: absolute;
    bottom: 40rpx;
    left: 50%;
    transform: translateX(-50%);
    .btn {
        width: 240rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: 500;
        color: #c4c4c4;
    }
    .btn_com {
        border: 1px solid #c4c4c4;
        border-radius: 60rpx;
    }
}
.popup-btns {
    display: flex;
    width: 100%;
    justify-content: center;
    .btnspan {
        width: 170rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: 500;
        color: #c4c4c4;
        box-sizing: border-box;
    }
    .btn_com {
        border: 1px solid #c4c4c4;
        border-radius: 60rpx;
    }
    .surespan {
        margin-left: 26rpx;
        background: #f0da21;
        box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.07);
        color: #000000;
        border-radius: 60rpx;
    }
}
</style>
<template>
    <div
        class="overflow-wrap"
        style="position: {{airHandVisible ? 'fixed':'static'}};"
    >
        <page-top-bar-custom
            @component-page-top-bar-custom-ready="setTopBarHeight"
            :bgColor="[navFixed? '#f7f8fa' : 'transparent']"
        >
            <div
                class="office-header"
                @click="goPre"
            >
                <van-icon
                    style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"
                    name="arrow-left"
                />
            </div>
        </page-top-bar-custom>
        <scroll-view
            id="scroll-view"
            scroll-y="{{canscroll}}"
            enhanced
            scroll-anchoring
            show-scrollbar="{{false}}"
            bounces="{{false}}"
            scroll-top="{{scrollTop}}"
            bindscroll="scrollEvent"
            scroll-with-animation="true"
            bindscrolltoupper="scrollToUpper"
        >
            <div
                class="map-wrap"
                v-show="transY"
            >
                <!--      <map-home    v-if="userInfo&& userInfo.userId" -->
                <map-home @mapChangeSpaceInfo="mapChangeSpaceInfo"
                :space="userControlSpace"
                ></map-home>
            </div>
            <div
                class="move-wrap"
                style="transform: translateY({{transY}}px);top:{{topBarHeight+roomPicTop}}px;"
                bindtouchstart="touchstart"
                bindtouchmove="touchmove"
                bindtouchend="touchend"
            >
                <div
                    style="opacity:{{opacityV}}"
                    v-show="!moveToBottom"
                >
                    <image
                        class="bg-img"
                        style="top:{{-topBarHeight-roomPicTop}}px;height:{{topBarHeight+roomPicTop}}px"
                        :src="topbgimg"
                    />
                </div>
                <div
                    style="opacity:{{opacityV}}"
                    v-show="!moveToBottom"
                    class="roomImgWrap"
                >
                    <image
                        class="room-img"
                        :src="h5StaticPath+headImg"
                        mode="widthFix"
                    />

                </div>

                <div class="office-container">
                    <!-- 空间基本情况 -->
                    <div
                        class="maproom-detail"
                        v-show="moveToBottom"
                    >
                        <div class="upToSpace" 
                        v-if="isSpaceCanControl">
                            <image
                                class="imgSt"
                                src="{{h5StaticPath}}icon-double-arrow.svg"
                            />
                            <span class="text">上滑进入空间</span>
                        </div>
                        <space-basic
                            :isSpaceCanControl="isSpaceCanControl"
                            :IsShowPerson="false"
                            :officeData="officeData"
                            :options="options"
                            :userInfo="userInfo"
                            :userControlSpace="userControlSpace"
                        ></space-basic>
                    </div>
                    <!-- 空间基本情况 -->
                    <div
                        id="roomDetail"
                        class="room-detail"
                        v-show="!moveToBottom"
                    >
                        <space-basic
                            :IsShowPerson="true"
                            :officeData="officeData"
                            :options="options"
                            :userInfo="userInfo"
                            :userControlSpace="userControlSpace"
                        ></space-basic>
                        <!-- 空间信息 -->
                        <div class="office-room-info">
                            <div class="room-envlist g-fl">
                                <div
                                    class="g-fl g-fl-c"
                                    v-for="(item,idx) in envlist"
                                    :key="idx"
                                    @tap.stop="handleDetail(item)"
                                >
                                    <span class="env-name">{{item.name}}</span>
                                    <span class="env-num">{{item.num }}</span>
                                    <span class="env-level">{{item.level ? item.level :'--'}}</span>
                                </div>
                            </div>
                        </div>
                        <div
                            class="sceneBox"
                            v-if="popList.length>0 && options.roomType =='会议室'"
                        >
                            <div
                                v-for="(item,idx) in popList"
                                class="eachScene"
                                :class="{'selScene':vanPopupIndex==item.code,'firstScene':idx==0&&popList.length==2}"
                                :key="idx"
                                @click="handleScene(item,idx)"
                            >
                                <image :src="h5StaticPath+item.headImg" />
                                <span>{{item.name}}</span>
                            </div>
                        </div>
                        <div v-if="roomHasScene && options.roomType =='开放'">
                            <work-scene-hand
                                @component-open-workTimePop="handlePopup"
                                @component-get-workTimeData="getWorkDayTime"
                                @component-open-sceneShowpop="handleWorkOff"
                                @component-EquipType-workTimePop="dialogShowEquipType"
                                :workDayTime="workDayTime"
                            ></work-scene-hand>
                        </div>
                    </div>
                    <all-close
                        @showAllClose="showAllClose"
                        :projectId="projectId"
                        :floorInfo="floorInfo"
                        v-if="(nowTime>eightTime||nowTime<sixTime)&&projectId=='Pj1101080259'"
                        ref="allclose"
                    ></all-close>
                    <air-hand-card
                        ref="airHandCard"
                        v-if="spaceEqFlagObj.hasAir"
                        id="inToView02"
                        :cardWidth="cardWidth"
                        :airVisible="airVisible"
                        :roomHasScene="roomHasScene"
                        :hasAir="spaceEqFlagObj.hasAir"
                        :equipConfig="equipmentsConfig"
                        :objectId="options.spaceId"
                        :roomType="options.roomType"
                        :projectId="projectId"
                        :temperature="officeData.temperature"
                        :isACATVA="isACATVA"
                        :isACATFC="isACATFC"
                        @showDetail="handleDetail"
                        @airShowVisible="airShowVisible"
                        @component-open-workTimePop="handlePopup"
                        @component-EquipType-workTimePop="dialogShowEquipType"
                        @airTemp="airTemp"
                        @setCanScroll="setCanScroll"
                        @component-open-airHand-pop="openAirHandPop"
                        v-bind:key="airKey"
                    ></air-hand-card>
                    <!-- 地暖 -->
                    <div v-show="floorHeatData.len">
                        <Floor-Heating
                            id="inToView5"
                            :cardWidth="cardWidth"
                            @component-open-floorFeat-pop="openFloorFeatPop"
                            @component-floorHeat-data="getFloorHeatData"
                            :spaceId="options.spaceId"
                        ></Floor-Heating>
                    </div>

                    <!-- 光照调节卡片 -->
                    <lamp-adjust
                        v-if="spaceEqFlagObj.hasLamp"
                        id="inToView1"
                        ref="lampAdjust"
                        :roomHasScene="roomHasScene"
                        :lampHide="lampHide"
                        :spaceId="options.spaceId"
                        :roomType="options.roomType"
                        :controlMode="controlMode"
                        :equipConfig="equipmentsConfig"
                        @component-open-colourPop="openColourPop"
                        @component-open-workTimePop="handlePopup"
                        @component-EquipType-workTimePop="dialogShowEquipType"
                        v-bind:key="lampKey"
                    ></lamp-adjust>

                    <!-- 窗帘卡片 -->
                    <div v-show="spaceEqFlagObj.hasCurtain">
                        <curtain-card
                            id="inToView2"
                            :projectId="projectId"
                            :spaceId="options.spaceId"
                            :curtainVisible="curtainVisible"
                            @comments-curtain-len="showCurtain"
                            @commponents-curtain-showPop="showCurtainPop"
                        >
                        </curtain-card>
                    </div>
                    <!-- 智能插座卡片 -->
                    <div v-show="spaceEqFlagObj.hasSocket">
                        <socket-card
                            id="inToView3"
                            :roomHasScene="roomHasScene"
                            :roomType="options.roomType"
                            :controlMode="controlMode"
                            :projectId="projectId"
                            :spaceId="options.spaceId"
                            @component-showSocket="showSocket"
                            @component-open-workTimePop="handlePopup"
                            @component-EquipType-workTimePop="dialogShowEquipType"
                        >
                        </socket-card>
                    </div>

                    <!-- 声压卡片 -->
                    <voice-adjust id="inToView4"></voice-adjust>

                    <!-- 页面到底标志 -->
                    <div
                        class="pageBottom"
                        :style="{height:windowHeightpx / 2+'px'}"
                    >
                        <!-- <image
                            class="log-text"
                            src="{{h5StaticLogo}}/page-home/tenatslink.svg"
                        /> -->
                    </div>
                </div>
            </div>

        </scroll-view>
        <!-- 窗帘 -->
        <van-popup
            overlay-style="background: rgba(0, 0, 0, 0.4)"
            custom-style="height: 55%"
            round
            :show="curtainVisible"
            position="bottom"
            @close="curtainVisible = false"
        >
            <div style="display:flex;justify-content: center;">
                <Curtain-Pop
                    :curtainVisible="curtainVisible"
                    :typeobj="crutainType"
                >
                </Curtain-Pop>
            </div>
        </van-popup>
        <!-- 地暖 -->
        <van-popup
            overlay-style="background: rgba(0, 0, 0, 0.4)"
            custom-style="height: 55%"
            round
            :show="floorfeatVisible"
            position="bottom"
            @close="floorfeatVisible = false"
        >
            <div style="display:flex;justify-content: center;">
                <Floor-Pop
                    :floorfeatVisible="floorfeatVisible"
                    :floorFeatItem="floorFeatItem"
                    :maxValue="floorHeatData.maxValue"
                    :minValue="floorHeatData.minValue"
                ></Floor-Pop>
            </div>
        </van-popup>
        <!-- 空调 -->
        <van-popup
            overlay-style="background: rgba(0, 0, 0, 0.4)"
            :custom-style="'height:'+airPopHight+'%'"
            round
            :show="airHandVisible"
            position="bottom"
            @close="airHandVisible = false"
        >
            <div style="display:flex;justify-content: center;">
                <airHand-Pop
                    :airHandItem="airHandItem"
                    :maxValue="airHandData.maxValue"
                    :minValue="airHandData.minValue"
                    :roomType="options.roomType"
                    @change-airHand-order="changeAirHandOrder"
                ></airHand-Pop>
            </div>
        </van-popup>
        <!-- 灯控色温 -->
        <van-popup
            overlay-style="background: rgba(0, 0, 0, 0.4)"
            custom-style="height: 55%"
            round
            :show="colourVisible"
            position="bottom"
            @close="colourVisible = false"
        >
            <div style="display:flex;justify-content: center;">
                <lamp-colour
                    v-if="colourVisible"
                    :colourObj="colourConfig"
                ></lamp-colour>
            </div>
        </van-popup>
        <!-- 空调反馈 文案 -->
        <van-popup
            overlay-style="background: rgba(0, 0, 0, 0.4)"
            round
            :show="airVisible"
            :close-on-click-overlay="false"
            @close="airVisible = false"
        >
            <air-feedback
                @component-open-sceneShowpop="airVisible = false;"
                :airSetText="airSetText"
                :officeData="officeData"
            />
        </van-popup>
        <!-- 浮层场景 popUp 手动 -->
        <van-popup
            :custom-style="'height:'+handPopHight+'%'"
            overlay-style="background: rgba(0, 0, 0, 0.4)"
            position="bottom"
            round
            :show="visible"
            @close="handlePopup(false)"
        >
            <div
                class="popup-box"
                v-if="options.roomType =='开放' && visible"
            >
                <work-overtime-hand
                    @component-close-visible="handlePopup"
                    @component-get-workTime="getWorkDayTime"
                    @component-set-countDown="handlecountDown"
                    :equipConfig="equipmentsConfig"
                    :visible="visible"
                    :localName="officeData.localName"
                    :bookEquipList="bookEquipList"
                    :workDayTime="workDayTime"
                    :objectId="options.spaceId"
                    :countDownTwoMin="countDownTwoMin"
                >

                </work-overtime-hand>
            </div>
        </van-popup>

        <!--场景 - 详情 -->
        <van-popup
            overlay-style="background: rgba(0, 0, 0, 0.4)"
            round
            :show="sceneShow"
            @close="hideScene"
        >
            <!-- 我要离开 -开放办公区 -->
            <work-off
                style="width:560rpx"
                v-if="options.roomType =='开放' && isWorkOff"
                :sceneShow="sceneShow"
                @component-open-sceneShowpop="handleWorkOff"
            >
            </work-off>
            <!--场景 - 详情 -->
            <div
                v-if="options.roomType !='开放'"
                class="meet-popup"
            >
                <pop-scene
                    :sceneDetail="sceneDetail"
                    @close-scene-show="hideScene"
                >
                </pop-scene>
            </div>

        </van-popup>
        <van-popup
            overlay-style="background: rgba(0, 0, 0, 0.4);"
            round
            :show="closeAllShow"
            @close="hideCloseAll"
        >
            <div class="scene-popup allclose-popup">
                <div class="scene-popup-head">
                    <div class="head-imgbg">
                        <div class="head-imgbox">
                            <image src="{{h5StaticPath}}scene_visitor.svg" />
                        </div>
                    </div>
                    <div v-show="!closeStatus">请确认办公室已经无人</div>
                    <div
                        class="head-title"
                        v-show="closeStatus&&closeShowNum<5"
                    >您工作辛苦了，感谢为低碳事业做出的贡献</div>
                    <div v-show="closeShowNum==5">请确认所有门窗已关闭</div>
                </div>
                <div
                    class="close-popup-body"
                    v-show="closeStatus&&closeShowNum<5"
                >
                    <div class="close-item">
                        <div class="close-pic">
                            <van-icon
                                name="passed"
                                class="passIcon"
                                v-if="closeShowNum!==1"
                            />
                            <span
                                class="pointer"
                                v-if="closeShowNum==1"
                            ></span>
                        </div>
                        <span>小飒正关闭办公室内设备 </span>
                    </div>
                    <div
                        class="close-item"
                        v-show="closeShowNum==3||closeShowNum==4"
                    >
                        <div class="close-pic">
                            <van-icon
                                name="passed"
                                class="passIcon"
                                v-if="closeShowNum==4"
                            />
                            <span
                                class="pointer"
                                v-if="closeShowNum==3"
                            ></span>
                        </div>
                        <span>暂时保留方便您离开的灯光</span>
                    </div>
                </div>
                <div class="popup-btns allclose-btns">
                    <span
                        class="btnspan btn_com"
                        v-show="!closeStatus"
                        @click="hideCloseAll"
                    >取消</span>
                    <span
                        class="btnspan surespan"
                        v-show="!closeStatus"
                        @click="sureCloseAll"
                    >确认</span>
                    <span
                        class="btnspan btn_com"
                        v-show="closeStatus&&closeShowNum==5"
                        @click="hideCloseAll"
                    >隐藏</span>
                </div>
            </div>
        </van-popup>
        <div
            id="navId"
            class="navBox"
            v-show="!moveToBottom"
        >
            <div class="eq-nav">
                <div
                    v-for="(item,index) in navList"
                    :id="item.id"
                    @click.stop="selectCrad"
                    :key="index"
                    class="nav-item"
                    :class="{'nav-item-active':navId==index}"
                    v-if="!item.noShow"
                >
                    <div class="nav-text">
                        <span>{{item.name}}</span>
                    </div>
                </div>
            </div>
            <div
                class="map-nav"
                @tap="toRoom"
            >
                <image
                    src="{{h5StaticPath}}n_icon_nav_map.svg"
                    mode="widthFix"
                />
                <div>进入地图</div>
            </div>
        </div>
        <set-permanent
            v-show="userControlSpace.isControlSpace === 3 && this.routeParams.from==='homeSetSpace'"
            :show="isShowPermanent"
            @component-permanent-panel-close="closePermanentPanel(false)"
        >
        </set-permanent>
    </div>

</template>

<script>
import wepy from '@wepy/core'
import store from '@/store'
import { mapState, mapActions } from '@wepy/x'
import { checkUserControl } from '@/service/user.js'
import moment from 'moment'
import {
    getSpaceAdjustList,
    getWeather,
    getEquipmentListHttp,
    getMeetingSceneHttp,
    switchoverSceneHttp,
    querySpaceSceneConfigHttp,
    queryCustomAndScence,
    queryEquipmentRunConfig
} from '../../api/officehome.js'
import { checkHasUserInfo } from '@/service/user'
import { isWithinLocation } from '@/service/location'
import config from '@/config'
let spaceInfoStatusTimer = null
const switchPanelHeight = 125 // 145是下面块的高
const roomPicTop = 185 // 135是建筑图片的高度 单位都是px
var moveY
let timerTwoMin = null
let initListSen = [
  {
    id: 0,
    code: 'DISCUSSING',
    name: '讨论',
    headImg: 'discuss.svg',
    img: 'discuss.png',
    checked: true,
    textObj: [
      {
        text: '已为您切换至适宜讨论的环境',
        status: 'ok'
      }
    ]
  },
  {
    id: 1,
    code: 'PROJECTING',
    name: '投影',
    headImg: 'shadow2.svg',
    img: 'shadow2.png',
    checked: false,
    textObj: [
      {
        text: '已为您切换至适宜演示的环境',
        status: 'ok'
      }
    ]
  },
  {
    id: 2,
    code: 'ADJOURNMENT',
    name: '散会',
    headImg: 'beover.svg',
    img: 'beover.png',
    checked: false,
    textObj: [
      {
        text: '会议室内设备已切换至节能模式',
        status: 'ok'
      }
    ]
  }
]
wepy.page({
  store,
  data: {
    sceneShow: false,
    isShowPermanent: false,
    isUserControlFromMap: true,
    userControlSpace: {}, // 用户控制空间
    cardWidth: 0, // 动态获取卡片的宽度
    floorFeatItem: {}, // 地暖弹窗数据
    airHandItem: {},
    airPopHight: 0,
    airHandData: {
      maxValue: 0,
      minValue: 0
    }, // 地暖数据
    floorHeatData: {
      maxValue: 0,
      minValue: 0,
      len: false
    }, // 地暖数据
    floorfeatVisible: false, // 地暖弹窗
    airHandVisible: false, // 空调手动弹窗
    curtainVisible: false, // 窗帘弹窗
    crutainType: {
      btnArr: [],
      data: [],
      curtainName: '窗帘'
    },
    vanPopupIndex: '',
    colourConfig: {}, // 色温设置
    colourVisible: false, // 色温弹窗
    equipmentsConfig: [], // 设备配置
    countDownTwoMin: 120, // 倒计时两分钟
    workDayTime: {}, // 开放办公区 时间
    closeStatus: false, // 点击了关闭确认按钮
    closeShowNum: 0,
    closeAllShow: false,
    airKey: 1,
    lampKey: 1,
    nowScrollY: 0,
    canscroll: true,
    scrollTop: 0,
    realScrollTop: 0,
    transY: 0,
    opacityV: 1,
    transYCopy: 0,
    windowHeightpx: 0,
    startY: 0,
    movesign: false,
    scale: 1,
    moveToBottom: false,
    floorInfo: [],
    h5StaticPath: config.h5StaticPath + '/page-officehome/',
    h5StaticLogo: config.h5StaticPath,
    lampHide: false, // 灯列表收起
    topbgimg: null, // 头部背景
    navFixed: false, // 滑动置顶

    showWorkOff: false, // 开放办公室的 提前关闭是否展示
    officeData: null,
    headScene: '', // 头部文案
    headImg: '', // 头部背景图片
    options: { roomType: null, spaceId: '' }, // 本地数据
    popList: [],
        // 上班=ATWORK 讨论=DISCUSSING 投影=PROJECTING 散会=ADJOURNMENT 下班=OFFWORK
    meetingRoomSence: [
            { code: 'DISCUSSING', name: '讨论' },
            { code: 'PROJECTING', name: '演示' },
            { code: 'ADJOURNMENT', name: '散会' }
    ],
    roomHasScene: false, // 是否有加班
    listSen: [],
    envlist: [],
    navList: [
      {
        top: 0,
        id: 0,
        code: 'air',
        name: '空调',
        noShow: false
      },
      {
        top: 0,
        id: 1,
        code: 'heat',
        name: '地暖',
        noShow: false
      },
      {
        top: 0,
        id: 2,
        code: 'lamp',
        name: '光照',
        noShow: false
      },
      {
        top: 0,
        id: 3,
        code: 'curtain',
        name: '窗帘',
        noShow: false
      },
      {
        top: 0,
        id: 4,
        code: 'socket',
        name: '插座',
        noShow: false
      },
      {
        top: 0,
        id: 5,
        code: 'noise',
        name: '声压',
        noShow: false
      }
    ],
    topBarHeight: 72,
    roomPicTop: roomPicTop,
    stopScrollCheck: false, // 点击导航
    navId: 0,
    visible: false,
        // 空间设备
    spaceEqFlagObj: {
      hasAir: true, // 有无空调
      hasBlowing: false, // 空调有无 变风量系统
      hasLamp: false, // 有无灯具
      hasSocket: false, // 有无插座
      hasCurtain: false // 有无 窗帘
    },

        // 空调-弹窗
    airSetText: {
      notice: '',
      designTemperature: 0,
      remark: []
    },
    viewOne: '', // 导航条第一个
    airVisible: false, // 弹窗
    routeParams: {},
    isACATVA: false,
    isACATFC: false,
    eightTime: 0,
    sixTime: 0,
    nowTime: new Date().valueOf(),
    isWorkOff: false, // 我要离开 点击否
    bookEquipList: '', // 预约显示的设备
    controlMode: 1
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      projectId: state => state.user.userInfo.projectId,
      handPopHight: state => state.officehome.handPopHight
    }),
    ...mapActions(['setIsApprovalProject']),
    hasMeetingScene() {
            // 是否展示会议室场景
      let meetingScene =
                this.roomHasScene &&
                this.projectId !== 'Pj1101050038' &&
                this.options.roomType === '会议室' &&
                this.spaceEqFlagObj.hasLamp
      return meetingScene
    },
    isSpaceCanControl() {
      let flag = true
      if (this.userControlSpace.isControlSpace === 1 || this.userControlSpace.isControlSpace === 2 || !this.isUserControlFromMap) {
        flag = false
      }
      return flag
    }
  },
  watch: {
    transY: function (newVal, oldVal) {
            // console.log('transY');
            // 如果在顶部 则可以滑动
      if (newVal < 0) return
      this.opacityV = 1 - (newVal / 80 > 1 ? 1 : newVal / 80)
      if (newVal == this.transYCopy) {
        this.moveToBottom = true
      } else {
        this.moveToBottom = false
      }
      if (newVal == 0) {
        this.canscroll = true
      } else {
        this.canscroll = false
      }
    }
  },
    // 加载字体
  onLoad(routeParams) {
    checkHasUserInfo()
    this.getCardWidth()
    this.getWeatherInfo()// 天气预报
    var nowTimeStr = moment().format('YYYY-MM-DD')
    var eightTime = moment(nowTimeStr + ' 20:00:00').valueOf()
    var sixTime = moment(nowTimeStr + ' 05:00:00').valueOf()
    this.sixTime = sixTime
    this.eightTime = eightTime
    this.routeParams = routeParams
  },
  onShow() {
    this.fromOtherPages()
    this.spaceInfoStatusTimer()
  },
  onReady() {
        // var scale = 750 / wx.getSystemInfoSync().windowWidth                                                                                                                                                                                                                                                 ; // 这是px转rpx 750/ wx.getSystemInfoSync().windowWidth=rpx/px 任何手机都是750rpx

    var windowHeightpx = wx.getSystemInfoSync().screenHeight

        // 设置初始值 topBarHeight*scale+roomPicTop
    this.transYCopy =
            windowHeightpx - switchPanelHeight - this.topBarHeight - this.roomPicTop // topBarHeight上顶端的bar
    this.windowHeightpx = windowHeightpx
    if (this.routeParams.showmap == 'true') {
      this.transY = this.transYCopy
            // console.log('onready');
    }
  },
  onHide() {
        // this.spaceEqFlagObj = {
        // hasAir: true,
        // hasLamp: false
        // }
    spaceInfoStatusTimer = clearInterval(spaceInfoStatusTimer)
    this.homePageHasHidden = false
  },
  onUnload() {
    spaceInfoStatusTimer = clearInterval(spaceInfoStatusTimer)
  },
  methods: {
    // 关闭设置常驻的弹框
    closePermanentPanel(val) {
      this.isShowPermanent = val
    },
    // 从找一找和首页 进入本页面
    async fromOtherPages() {
            // homeSetSpace 设置常驻,  homeShowEnv 环境调节,  FindIt 找一找
            // openLamp 开灯,  airAddOne 空调调高一度,  airReduceOne 空调下降一度 , closeLampAir 关闭灯和空调

      if (this.routeParams.from === 'FindIt') {
        this.getCurrentSpace('FindIt')
        this.isUserControlFromMap = this.routeParams.isUserControl
        this.options.spaceId = this.routeParams.spaceId
        this.moveToBottom = true  // 来自找一找, 页面在底部
        this.getData() // 获取数据
      } else {
        // 从首页进入
        await this.getCurrentSpace('home')
        if (this.options.spaceId !== '') {
          await this.getData()
        }
        let setAirtemp = this.$refs.airHandCard.airTemp

        switch (this.routeParams.from) {
          case 'homeShowEnv':
            if (this.userControlSpace.isControlSpace === 1 || this.userControlSpace.isControlSpace === 2) {
              this.moveToBottom = true
              this.toRoom()
            }
            break
          case 'homeSetSpace':
            this.isShowPermanent = true
            this.moveToBottom = true
            this.toRoom()
            break
          case 'openLamp':
            this.selectCrad('', 'lamp')
            this.$refs.lampAdjust.eqChange(true, 'allLamp')
            break
          case 'airAddOne':
            this.selectCrad('', 'air')
            this.$refs.airHandCard.changeZongAir('temp', setAirtemp + 1)
            break
          case 'airReduceOne':
            this.selectCrad('', 'air')
            this.$refs.airHandCard.changeZongAir('temp', setAirtemp - 1)

            break
          case 'closeLampAir':
            this.selectCrad('', 'air')
            this.$refs.lampAdjust.eqChange(false, 'allLamp')
            this.$refs.airHandCard.airData.isOpen = false
            this.$refs.airHandCard.changeZongAir('sw')
            break

          default:
            break
        }
      }
    },
    getCurrentSpace(from) {
      return checkUserControl().then(res => {
        // isControlSpace 1-租户下无可控；2-租户有可控；3-用户有可控 4-当前空间为常驻空间
        this.userControlSpace = res
        // 从首页进入 才给空间重新赋值
        if (from === 'home') {
          this.options.spaceId = res.spaceId || ''
        }
      })
    },

    setCanScroll(val) {
      this.canscroll = val
    },
        // 空调弹框
    openAirHandPop(val, tempObj) {
      this.airHandItem = val
      let hight = 0
      if ((val.boundPoint.gearSetBound || val.boundPoint.modeSetBound) && val.boundPoint.tempSetBound) {
        hight = 45
      }
      if ((val.boundPoint.gearSetBound || val.boundPoint.modeSetBound) && val.boundPoint.tempSetBound) {
        hight = 55
      }
      if (val.boundPoint.gearSetBound && val.boundPoint.modeSetBound && val.boundPoint.tempSetBound) {
        hight = 70
      }
      this.airPopHight = hight
      this.airHandData = tempObj
      this.airHandVisible = true
    },
    changeAirHandOrder(pobj, deviceObjCopy) {
      this.$refs.airHandCard.changeOneAir(pobj.id, pobj.code, pobj.value, deviceObjCopy)
      this.airHandItem = deviceObjCopy
    },
        // 地暖弹框
    openFloorFeatPop(val) {
      this.floorfeatVisible = true
      this.floorFeatItem = val
    },
        // 地暖 数据
    getFloorHeatData(val) {
      this.floorHeatData = val
      this.floorHeatData.len = !!val.len
      this.navList.map(item => {
        if (item.code === 'heat') {
          item.noShow = !val.len
        }
      })
    },

        // 窗帘-弹窗
    showCurtainPop(val) {
      this.crutainType = JSON.parse(JSON.stringify(val))
      this.curtainVisible = true
    },

        // 色温弹框
    openColourPop(val) {
      this.colourVisible = true
      this.colourConfig = val
    },
        // 空间下设备是否受加班可控
    checkEquipmentConfigStatus() {
      return queryEquipmentRunConfig(this.options.spaceId).then(res => {
        const resArr = res.data
        this.equipmentsConfig = resArr
      })
    },
        // 手动 弹窗 展示的设备类型
    dialogShowEquipType(val) {
      this.bookEquipList = val
    },
    showCurtain(len) {
      this.spaceEqFlagObj.hasCurtain = !!len
      this.navList.map((item, idx) => {
        if (item.code === 'curtain') {
          item.noShow = !len
        }
      })
    },
        // 插座
    showSocket(len) {
      this.spaceEqFlagObj.hasSocket = !!len
      this.navList.map((item, idx) => {
        if (item.code === 'socket') {
          item.noShow = !len
        }
      })
    },

    getWorkDayTime() {
            // 获取个人空间使用时间
      return queryCustomAndScence({ spaceId: this.options.spaceId }).then(
                res => {
                  this.workDayTime = res
                }
            )
    },
    vibrateShort() {
      if (wx.canIUse('vibrateShort')) {
        wx.vibrateShort()
      } else {
        wx.vibrateLong()
      }
    },
    showAllClose() {
      this.closeAllShow = true
      this.closeShowNum = 0
      this.closeStatus = false
    },
        // 关闭全部关闭弹窗
    hideCloseAll() {
      this.closeAllShow = false
            // this.closeShowNum=0                                                                                                                                                                                                                                                                                  ;
            // this.closeStatus=false                                                                                                                                                                                                                                                                               ;
    },
        // 确认关闭所有设备
    sureCloseAll() {
      this.vibrateShort()
      this.$refs.allclose.controlEquipStatistics()
      this.closeShowNum = 1
      this.closeStatus = true
      var interval = setInterval(() => {
        this.closeShowNum++
        if (this.closeShowNum == 5) {
          clearInterval(interval)
        }
      }, 1800)
    },
        // 空调 - airTemp
    airShowVisible(val) {
      this.airVisible = true
      this.airSetText = {
        notice: '',
        remark: '',
        designTemperature: ''
      }
      this.airSetText.designTemperature = val.designTemperature // 目标温度
      this.airSetText.toWhere = val.toWhere
    },
    airTemp(val) {
      this.airSetText.notice = val.notice
      if (val.remark && val.remark !== []) {
        const remark = val.remark.split('*')
        this.airSetText.remark = remark
      }
    },

    getWeatherInfo() {
      getWeather().then(res => {
        const outWeather = res.content ? res.content : {}
        var text = outWeather.text || ''
        this.getnowTime(text) // 头部背景
      })
    },
    getnowTime(text) {   // 头部背景图片
      let now = moment().hours()
      if (text.indexOf('霾') > -1) {
        this.topbgimg = `${this.h5StaticPath}office_smog.jpg`
      } else {
        if (now >= 6 && now < 19) {
                    // 白天
          this.topbgimg = `${this.h5StaticPath}office_bright.jpg`
        } else {
                    // 夜晚
          this.topbgimg = `${this.h5StaticPath}office_night.jpg`
        }
      }
    },

    async getData() {
            // 获取数据
      await this.getSpaceInfo() // 空间指数信息
      await this.querySpaceSceneConfig() // 获取空间场景
      await this.getWorkDayTime() // 工作组时间
      this.getEquipments() // 空间下的设备
      this.checkEquipmentConfigStatus()
    },
    getEquipments() {
            // 获取空间下设备
      const params = {
        spaceId: this.options.spaceId
                // category: // 设备类。可不填，查询所有。
      }
      getEquipmentListHttp(params).then(res => {
                // equipmentCategory 有 空调 ACATFC、ACATFU、ACATVA、ACATVI；有灯 灯 SELTLT
                // ACATVA 变风量系统
        this.navList.map(item => {
          if (item.code === 'air' || item.code === 'lamp') {
            item.noShow = true
          }
        })
        this.spaceEqFlagObj.hasAir = false
        this.spaceEqFlagObj.hasLamp = false;
        (res.data || []).forEach(item => {
          if (item.equipmentCategory === 'ACATVA') {
            this.isACATVA = true // 如果是嘉铭的ACATVA 则不显示开关
          }
          if (item.equipmentCategory === 'ACATFC') {
            this.isACATFC = true // 如果是嘉铭的ACATVA 则不显示开关
          }
          if (
                        item.equipmentCategory === 'ACATFC' ||
                        item.equipmentCategory === 'ACATVA' ||
                        item.equipmentCategory === 'ACATVI'
                    ) {
            this.spaceEqFlagObj.hasAir = true
            this.navList.map(item => {
              if (item.code === 'air') {
                item.noShow = false
              }
            })
            this.airKey++
          } else if (item.equipmentCategory === 'SELTLT') {
            this.spaceEqFlagObj.hasLamp = true
            this.navList.map(item => {
              if (item.code === 'lamp') {
                item.noShow = false
              }
            })
            this.lampKey++
          }
        })
      })
    },

    switchoverScene(code) {
            // 改变场景(上班.讨论.投影.散会.下班)
      const params = {
        spaceId: this.options.spaceId,
        type: code,
        pubname: config.brsgServer.pubname
      }
      return switchoverSceneHttp(params)
    },
    spaceInfoStatusTimer() {
      spaceInfoStatusTimer = clearInterval(spaceInfoStatusTimer)
      spaceInfoStatusTimer = setInterval(() => {
        this.getSpaceInfo() // 空间信息
      }, 20 * 1000) // 2秒描刷接口
    },
    // 地图数据切换空间
    mapChangeSpaceInfo(obj) {
      // isUserControl-Boolean 用户空间是否可以控
      const mapItem = JSON.parse(JSON.stringify(obj))
      this.options.spaceId = mapItem.spaceId
      this.isUserControlFromMap = mapItem.isUserControl
      this.getData()
    },
    getSpaceInfo() {
            // 空间信息
      const params = {
        criteria: {
          spaceId: this.options.spaceId
        },
        pubname: config.brsgServer.pubname,
        openid: this.userInfo.userId
      }
      return getSpaceAdjustList(params).then(res => {
        this.officeData = (res && res.content && res.content[0]) || {}
        this.checkSpaceType(this.officeData.roomFuncType)
        if (res && res.content) {
          res.content.forEach(item => {
            this.controlMode = item.controlMode || 1

            var envlist = [
              {
                id: 1,
                name: 'CO₂',
                num: '--',
                level: '--',
                funcid: 'CO2',
                code: 'co2'
              },
              {
                id: 2,
                name: 'PM2.5',
                num: '--',
                level: '--',
                funcid: 'PM2d5',
                code: 'pm25'
              },
              {
                id: 3,
                name: '甲醛',
                num: '--',
                level: '--',
                funcid: 'HCHO',
                code: 'jiaquan'
              }
                            // { id: 4, name: '湿度', num: '--', level: '--', funcid: 'Tdb,RH', code: 'shidu' }
                            // { id: 3, name: 'TVOC', num: 0.4, level: '健康' }
            ]
            if (item.co2 || item.co2 == 0) {
              envlist[0].level = this.checkLevel(item.co2, 'co2').levelTxt
              envlist[0].num = item.co2
            } else {
              envlist[0].level = '--'
              envlist[0].num = '--'
            }
            if (item.pm25 || item.pm25 === 0) {
              envlist[1].level = this.checkLevel(item.pm25, 'pm25').levelTxt
              envlist[1].num = item.pm25
            } else {
              envlist[1].level = '--'
              envlist[1].num = '--'
            }
            if (item.hcho || item.hcho == 0) {
              envlist[2].level = this.checkLevel(item.hcho, 'hcho').levelTxt
              envlist[2].num = item.hcho.toFixed(2)
            } else {
              envlist[2].level = '--'
              envlist[2].num = '--'
            }
            var temperNum = this.officeData.temperature
                            ? this.officeData.temperature
                            : '--'
            var temperText = this.officeData.temperature
                            ? this.checkLevel(this.officeData.temperature, 'temper')
                                .levelTxt
                            : '--'
            var tempObj = {
              id: 0,
              name: '温度',
              num: temperNum,
              level: temperText,
              funcid: 'Tdb,RH',
              code: 'wendu'
            }
            envlist.unshift(tempObj)
            this.envlist = envlist
          })
        } else {
          this.envlist = []
        }
        return 'success'
      })
    },
    getMeetingScene() {
            // 获取当前会议室的场景 OFFWORK
      const params = {
        spaceId: this.options.spaceId
      }

      getMeetingSceneHttp(params).then(res2 => {
        var rescont = res2.content || ''
        if (rescont === 'OFFWORK') {
          rescont = 'ADJOURNMENT'
        }
        var filterArr = this.listSen.filter(function (item) {
          return item.code === rescont
        })
                // 根据code 获取场景的名字
        this.headScene = (filterArr[0] && filterArr[0].name) || '散会'
        this.vanPopupIndex = rescont
      })
    },
    querySpaceSceneConfig() {
            // 获取空间场景
      const params = {
        spaceId: this.options.spaceId
      }
      this.roomHasScene = false
      return querySpaceSceneConfigHttp(params).then(res => {
        if (!res.data) return
        let sceneArr = res.data
        this.roomHasScene = true // 空间有场景
        if (this.options.roomType !== '会议室') return
        let copyListSen = JSON.parse(JSON.stringify(initListSen))
        this.listSen = JSON.parse(JSON.stringify(initListSen))
        copyListSen.forEach(item => {
          let flag = false
          let deleteIdx = null
          sceneArr.forEach((j, idx) => {
            deleteIdx = idx
            if (item.code === j.sceneType) {
              flag = true
            }
          })
          if (!flag) {
            this.listSen.splice(deleteIdx, 1)
          }
        })

        this.popList = this.listSen
      })
    },

    checkSpaceType(roomFuncType) {
            // 空间类型处理
            // const roomFuncType = this.officeData.roomFuncType                                                                                                                                                                                                                                                    ; // 空间类型
      if (
                roomFuncType === '311' ||
                roomFuncType === '310' ||
                roomFuncType === '312'
            ) {
        this.options.roomType = '个人'
        this.headImg = 'office_person_2.png'
        this.headScene = '工作'
      } else if (
                roomFuncType === '320' ||
                roomFuncType === '321' ||
                roomFuncType === '322' ||
                roomFuncType === '323'
            ) {
        this.getMeetingScene()
        this.options.roomType = '会议室'
        this.headImg = 'office_normal_2.png'
      } else if (
                roomFuncType === '313' ||
                roomFuncType === '314' ||
                roomFuncType === '315'
            ) {
        this.options.roomType = '开放'
        this.headImg = 'office_publi_2.png'
      } else {
        this.options.roomType = '其它'
        this.headImg = 'office_publi_2.png'
      }
    },
    checkLevel(value, name, seasonType) {
      let tdbParam = {
        Cooling: {
          range: [22, 26],
          text: ['偏冷', '舒适', '偏热']
        },
        Warm: {
          range: [18, 24],
          text: ['偏冷', '舒适', '偏热']
        },
        Transition: {
          range: [18, 26],
          text: ['偏冷', '舒适', '偏热']
        }
      }
      let objList = {
        humidity: {
          range: [30, 70],
          text: ['干燥', '健康', '潮湿']
        },
        co2: {
          range: [800, 1000, 1500],
          text: ['健康', '达标', '略高', '超标']
        },
        pm25: {
          range: [35, 75, 115, 150, 250],
          text: ['健康', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
        },
        hcho: {
          range: [0.1],
          text: ['健康', '超标']
        },
        temper: {
          range: [20, 24],
          text: ['偏冷', '舒适', '偏热']
        }
      }
      seasonType = seasonType || 'Transition'
      objList.temper = tdbParam[seasonType]
      let sortArr = [value, ...objList[name].range].sort((a, b) => { return a - b })
      let level = sortArr.findIndex(item => item === value)
      let levelTxt = objList[name].text[level]
      return { level, levelTxt }
    },
    getCardWidth() {
            // 获取每一个卡片的top height
      var _this = this
      const query = wx.createSelectorQuery()
      query.select('#inToView4').boundingClientRect()
      return new Promise(function (resolve, reject) {
        query.exec(function (res) {
          const mlr = 20 * 2 // 左右marign
          _this.cardWidth = res[0].width - mlr
          resolve()
        })
      })
    },
    getCardPosition() {
            // 获取每一个卡片的top height
      var _this = this
      const query = wx.createSelectorQuery()
      var halfWindowHeightpx = this.windowHeightpx / 2
      query.select('#roomDetail').boundingClientRect()
      query.select('#inToView02').boundingClientRect()
      query.select('#inToView5').boundingClientRect()
      query.select('#inToView1').boundingClientRect()
      query.select('#inToView2').boundingClientRect()
      query.select('#inToView3').boundingClientRect()
      query.select('#inToView4').boundingClientRect()
      return new Promise(function (resolve, reject) {
        query.exec(function (res) {
          _this.navList[0].top =
                        res[0].height +
                        _this.roomPicTop +
                        _this.topBarHeight -
                        halfWindowHeightpx // 这个是 与顶部的距离 减去 halfWindowHeightpx 以中间线为基准
          _this.navList[0].height = _this.navList[0].noShow
                        ? 0
                        : (res[1] && res[1].height) || 0
          for (let i = 1; i < res.length; i++) {
            _this.dealNav(i, _this, res)
          }
          resolve()
        })
      })
    },
    dealNav(idx, _this, res) {
      if (!_this.navList[idx]) return
      const pre = idx - 1
      const preTop = _this.navList[pre].top || 0
      const next = idx + 1
      _this.navList[idx].top =
                preTop + 15 + ((res[idx] && res[idx].height) || 0)
      _this.navList[idx].height = _this.navList[idx].noShow
                ? 0
                : (res[next] && res[next].height) || 0
    },
        // 导航条
    async selectCrad(e, code) {
      const targetObj = this.navList.find(function (item) {
        return item.code === code
      })
      let id = code ? targetObj.id : e.currentTarget.id
      if (id === this.navId) return
      this.navId = id
      this.lampHide = !this.lampHide // 当点击了导航 灯的列表要收起
      await this.getCardPosition()
      var targetNav = this.navList.find(function (item) {
        return item.id == id
      })
      this.scrollTop = targetNav.top // 实现点击导航 滚动
    },
    async scrollEvent(event) {
        // 空间不可控不能滑动
      if (!this.isSpaceCanControl) return
            // 滚动 选中导航条相应的
      await this.getCardPosition()
      var scrollTop = (event.detail || event.$wx.detail || {}).scrollTop || 0
      this.realScrollTop = scrollTop
            // console.log('scrollEvent-scrollTop', this.realScrollTop)                                                                                                                                                                                                                                             ;
      if (scrollTop < this.navList[0].top + this.navList[0].height) {
        this.navId = 0
      }
      for (let i = 0; i < 8; i++) {
        this.determine(scrollTop, i)
      }
    },
    determine(scrollTop, idx) {
      if (!this.navList[idx]) return
      const next = idx + 1
      const nextTop = this.navList[next] ? this.navList[next].top : 0
      const nextHeight = this.navList[next] ? this.navList[next].height : 0
      if (
                scrollTop > this.navList[idx].top + this.navList[idx].height &&
                scrollTop < nextTop + nextHeight
            ) {
        this.navId = next
      }
    },

    scrollToUpper(event) {
            // 到达顶部
            // console.log('scrollToUpper-scrollTop');
            // this.realScrollTop = 0                                                                                                                                                                                                                                                                               ;
    },
        // 进入 detail 页
    handleDetail(data) {
      wx.navigateTo({
        url: `./detail?spaceId=${this.officeData.id}&funcid=${data.funcid}`
      })
    },
        // 进入地图页
    toRoom() {
      this.scrollTop = null
      this.scrollTop = 0
      console.log('----滑下来----')
      this.transY = this.transYCopy
    },
    handleWorkOff(val) {
            // 我要离开 弹窗展示
      if (val === 'showWorkOff') {
        this.isWorkOff = true
        this.sceneShow = true
        return
      }
      if (val === 'hideWorkOff') {
        this.isWorkOff = false
        this.sceneShow = false
      }
    },
    handlecountDown() {
      this.countDownTwoMin = 0
      clearInterval(timerTwoMin)
      timerTwoMin = null
      if (this.visible) {
        this.countDownTwoMin = 60 * 2
        this.getWorkDayTime() // 获取工作时间
        timerTwoMin = setInterval(() => {
          if (this.countDownTwoMin === 1) {
            this.visible = false
            this.getWorkDayTime() // 获取工作时间
          } else {
            this.countDownTwoMin = this.countDownTwoMin - 1
          }
        }, 1000 * 20)
      } else {
        clearInterval(timerTwoMin)
        timerTwoMin = null
        this.getWorkDayTime() // 获取工作时间
      }
    },
        // 调出浮层
    handlePopup(val) {
      if (!this.roomHasScene) return // 没有加班 不可配置
      this.visible = val
      if (this.options.roomType == '开放') {
        this.handlecountDown() // 倒计时两分钟
      }
    },

    hideScene() {
      this.sceneShow = false
    },
        // 调出场景-浮层 切换场景
    handleScene(mitem, idx) {
            //   isWithinLocation()
            //             .then(() => {
      var name = mitem.name
      this.visible = false // 关闭 切换场景
      if (!this.visible) {
        this.sceneShow = !this.sceneShow // 场景详细信息
      }
      this.popList.forEach((item, idx) => {
        if (name === item.name) {
          this.sceneDetail = JSON.parse(JSON.stringify(item))
          this.sceneDetail.textObj = []
                    // 场景切换的对话框动效
          item.textObj.forEach((element, idx) => {
            setTimeout(() => {
              this.sceneDetail.textObj.push(element)
            }, 150 * (idx + 1))
          })
        }
      })
            // 放在这个位置 是为了 切换场景时直接改变场景 不等待后台
      this.headScene = this.sceneDetail.name
      this.vanPopupIndex = this.sceneDetail.code

      this.switchoverScene(this.sceneDetail.code).then(res => {
        if (res.result === 'success') {
                    // this.headScene = this.sceneDetail.name
                    // this.vanPopupIndex = this.sceneDetail.code
        }
      })
            // })
            // .catch(() => { })
      console.log('handleScene this.popList', this.popList)
    },

        // 返回 上一页
    goPre() {
      wx.navigateBack()
    },
    setTopBarHeight(height) {
      this.topBarHeight = height
    },

    touchstart: function (e) {
      var pageY = e.touches[0].pageY
      var _this = this
      this.startY = pageY

      const query = wx.createSelectorQuery()
            // query.selectViewport().scrollOffset()                                                                                                                                                                                                                                                                ;//这是page
            // query.select('#scroll-view').boundingClientRect();
      query.select('#scroll-view').scrollOffset()
      query.exec(res => {
        _this.nowScrollY = res[0].scrollTop
        if (
                    (_this.nowScrollY == 0 && _this.transY == 0) ||
                    (_this.nowScrollY == 0 && _this.transY == _this.transYCopy)
                ) {
                    // 当最顶端 最低端时 才可以滑动
          _this.movesign = true
        } else {
          _this.movesign = false
        }
                // console.log('touchstart', this.nowScrollY, this.realScrollTop, this.transY)                                                                                                                                                                                                                          ;
      })
    },
    touchmove: function (e) {
      if (!this.movesign) return
      var _this = this
            // console.log('touchmove', this.nowScrollY, this.realScrollTop, this.transY)                                                                                                                                                                                                                           ;

      var touch = e.touches[0]
      var pageY = Number(touch.pageY) // 页面触点Y坐标

      moveY = pageY - this.startY
      this.startY = pageY

      if (this.nowScrollY > 0 || this.realScrollTop > 0) {
                // 如果是transY为0的情况 发生屏幕滚动 不改变transY的值
        this.transY = 0
        return
      }

      var transY = this.transY + moveY

      if (transY < 0) {
                // transY只能是正的
        transY = 0
      }
      if (transY > this.transYCopy) {
        transY = this.transYCopy
      }

      this.transY = transY
    },
    touchend: function (e) {
            // 挪动到一定区域 则可以自己到固定位置
      var _this = this
      const query = wx.createSelectorQuery()
      query.select('#scroll-view').scrollOffset()
      query.exec(res => {
                // console.log('touchend', res)                                                                                                                                                                                                                                                                         ;
        _this.realScrollTop = res[0].scrollTop
        _this.nowScrollY = res[0].scrollTop

                // console.log('touchend', this.nowScrollY, this.realScrollTop, this.transY)                                                                                                                                                                                                                            ;
        if (this.realScrollTop > 0) {
                    // 如果是transY为0的情况 手指上移动 也不改变transY的值
          this.transY = 0
          return
        }
        if (this.transY < 0) {
          this.transY = 0
        }
        if (this.transY >= this.transYCopy) {
          this.transY = this.transYCopy
        }

        if (moveY > 0) {
                    // 手指下滑
          if (this.transY <= 60) {
            this.transY = 0
          } else {
            this.transY = this.transYCopy
          }
                    // console.log('下滑下滑下滑下滑xia', this.nowScrollY, this.transY)                                                                                                                                                                                                                             ;
        } else {
          if (this.transY >= this.transYCopy - 60) {
            this.transY = this.transYCopy
          } else {
            this.transY = 0
          }
                    // console.log('上滑上滑上滑', moveY)                                                                                                                                                                                                                                                             ;
        }
        this.movesign = false
      })
    }
  }
})
</script>


<config>
{
"navigationStyle": "custom",
backgroundColor: '#f7f8fa',
usingComponents: {
    "Curtain-Pop":'./Curtain/curtainPop.wpy',
    "Floor-Pop":'./FloorHeating/floorPop.wpy',
    "airHand-Pop":'./airHand/airHandPop.wpy',
    "Floor-Heating":'./FloorHeating/floorHeating',
    "curtain-card":"./Curtain/curtain-card",
    'page-top-bar-custom': '~@/components/common/page-top-bar-custom',
    "work-overtime-hand":"./workOvertime-hand",
    "space-basic":"./Header/space-basic",
    "pop-scene":"./Meeting/pop-meet-scene.wpy",
    "work-off":"./components/work-off",
    "work-scene-hand":"./components/work-scene-hand",
    "set-permanent":"./components/set-permanent",
    "air-hand-card":"./airHand/air-hand-card",
    "air-feedback":"./components/air-feedback",
    "lamp-adjust":"./components/lamp-adjust",
    "lamp-colour":"./components/lamp-colour",
    "socket-card":"./components/socket-card",
    "all-close":"./components/all-close",
    "voice-adjust":"./components/voice-adjust",
    "map-home":"../intelligentControl/home2",
    "van-icon": "module:@vant/weapp/dist/icon",
    "van-popup": "module:@vant/weapp/dist/popup"

},
componentPlaceholder: {
'page-top-bar-custom': 'view'
}
}
</config>