sagacloud-sagacare-ipad/src/views/envmonitor/index1.vue

<template>
  <div
    v-if="!isBottom"
    id="header"
    class="ignore_com-top"
  >
    <Header :outWeather="outWeather" v-if="!isBottom"/>
  </div>
  <!--  <Comheader v-else color="#f7f8fa" id="header"></Comheader>-->
  <div class="envmonitor" id="env">
    <div class="envmonitor-content"
         :style="{overflow:isBottom?'hidden':'auto'}"
         id="envContent"
    >
      <div class="envmonitor-box" id="envBox">
        <img
          class="top-bg"
          :style="{opacity:opacityV}"
          v-show="!hideTopImg"
          :src="topbgimg"
          alt=""
        >
        <div :class="!isBottom?'content ptheader':''">
          <div class="house"
               :style="{opacity:opacityV}"
               id="house"
               v-show="!hideTopImg"
          >
            <img
              v-show="headerInfo.headImg"
              :src="headerInfo.headImg"
              alt=""
            >
          </div>
          <div class="house-des"
               :class="isBottom?'house-des-bottom':'house-des-top'"
               id="houseDes"
          >
            <div class="house-scrool-icon">
              <img :src="parseImgUrl('map-new-icon','scrool.svg')" alt="">
            </div>
            <div class="house-top">
              <div class="house-name">
                {{ localName }}
              </div>

              <!--              &lt;!&ndash; 个人办公室 &ndash;&gt;-->
              <!--              <div class="house-device"-->
              <!--                   v-if="roomType=='个人'"-->
              <!--              >-->
              <!--                &lt;!&ndash;            <span>设备将在 <i>21：30</i> 关闭</span>&ndash;&gt;-->
              <!--                <span>{{ headerInfo.headScene }}</span>-->
              <!--                <VanIcon-->
              <!--                  :name="deviceIcon"-->
              <!--                  class="device-arrow"-->
              <!--                />-->
              <!--              </div>-->

              <!-- 会议室(场景) -->
              <div class="house-device"
                   @click="handlePopup('scenario')"
                   v-if="roomType=='会议室'"
              >
                <!--            <span>设备将在 <i>21：30</i> 关闭</span>-->
                <span>{{ headerInfo.headScene }}</span>
                <VanIcon
                  :name="deviceIcon"
                  class="device-arrow"
                />
              </div>
              <!-- 开放区域 -->
              <!--              v-if="roomType=='开放' && spaceExistenceDevice.light"-->
              <div class="house-device" v-if="false">
              <span
                class="btn-off-work"
                v-if="showWorkOff"
                @click.stop="handlePreClose"
              >提前关闭</span>
                <span
                  v-if="headerInfo.tipTextSwatch"
                  class="tmp-title"
                  @click.stop="handlePopup('timer')"
                >{{ headerInfo.tipText }}</span>
                <span
                  class="tmp-title"
                  @click.stop="handlePopup('timer')"
                  v-show="!headerInfo.tipTextSwatch && spaceExistenceDevice.light"
                >
              设备将在
              <i>{{ headerInfo.tipText }}</i>
              关闭</span>
                <VanIcon
                  name="arrow"
                  class="device-arrow"
                />
              </div>
            </div>
            <div class="house-row">
              <div
                class="house-col"
                v-for="(item,index) in realEevList"
                @click="handleDetail(item)"
                :key="'env'+index"
              >
                <template v-if="item.num">
                  <p>{{ item.name }}</p>
                  <p>{{ item.num }}</p>
                  <p>{{ item.level }}</p>
                </template>
              </div>
            </div>
          </div>
          <Air v-if="officeData.temperature || spaceExistenceDevice.airConditioner"
               id="airId"
               key="airId"
               @updateAirTemp="updateAirTemp"
               :hasAir="spaceExistenceDevice.airConditioner"
               :airVolumes="officeData.airVolumes"
               :temperature="officeData.temperature"
               :spaceId="spaceInfo.spaceId"
               :projectId="projectId"
               :isACATVA="isACATVA"
               :userIsControl="userIsControl"
          />
          <Light v-if="spaceExistenceDevice.light"
                 id="lightId"
                 key="lightId"
                 :userIsControl="userIsControl"
                 :spaceId="spaceInfo.spaceId"
                 :projectId="projectId"
          />
          <Curtain :spaceId="spaceInfo.spaceId"
                   id="curtainId"
                   key="curtainId"
                   :userIsControl="userIsControl"
                   v-if="spaceExistenceDevice.curtain"
                   :projectId="projectId"
          />
        </div>
      </div>
    </div>

    <van-popup v-model:show="showScenario" position="bottom">
      <scenario
        v-if="popupType==='scenario'"
        :popList="popList"
        :spaceId="spaceInfo.spaceId"
        :projectId="projectId"
        @setHeadScene="setHeadScene"
        :vanPopupIndex="vanPopupIndex"
      ></scenario>
      <timeBox
        @setWorkTime="setWorkTime"
        :spaceId="spaceInfo.spaceId"
        :workInfo="workInfo"
        :projectId="projectId"
        :nextCusStartTime="nextCusStartTime"
        :cusStartTime="cusStartTime"
        :cusEndTime="cusEndTime"
        v-else
      ></timeBox>
    </van-popup>

    <van-dialog v-model:show="showSecenDetailDalig"
                class="dialog-width"
                :show-confirm-button="false"
                :show-cancel-button="false"
    >
      <div class="air-dialog-content">
        <div class="dialog-top">
          <img
            class="img-yellow"
            v-if="sceneDetail.img"
            :src="parseImgUrl('page-officehome',sceneDetail.img)" alt=""
          >
        </div>
        <div class="secen-title">
          切换至{{ sceneDetail.name }}场景
        </div>
        <div class="scene-popup-body">
          <div
            class="body-item"
            v-for="(item,idx) in sceneDetail.textObj"
            :key="idx"
          >
            <van-icon
              name="passed"
              style="color:#07C160;margin-right:8px"
              v-if="item.status=== 'ok'"
            />
            <span
              class="text-status"
              v-if="item.status=== 'go'"
            ></span>
            <span
              class="text-status grey"
              v-if="item.status=== 'grey'"
            ></span>
            <span>{{ item.text }}</span>
          </div>
        </div>
        <div class="dialog-btns" @click="showSecenDetailDalig = false">
          <span>隐藏</span>
        </div>
      </div>
    </van-dialog>

    <van-popup v-model:show="showSpaceTip" class="space-tip">
      <div class="space-tip-close" @click="closeTip">
        <img :src="parseImgUrl('page-officehome','close.svg')" alt="">
      </div>
      <div class="space-tip-title">
        设置成功
      </div>
      <div class="space-tip-box">
        <span>单击</span>
        <img :src="parseImgUrl('page-officehome','mySpaceIcon.svg')" alt="">
        <span>可打开常驻空间的调节页面</span>
      </div>
    </van-popup>
  </div>
  <nav-bar :navList="navList"
           ref="childRef"
           id="nav"
           @changeNav="changeNav"
           v-if="!isBottom"
  ></nav-bar>

</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onBeforeMount, onMounted, nextTick, onBeforeUnmount } from 'vue'
import MapBox from '@/views/envmonitor/MapBox.vue'
import Header from '@/components/header/Index.vue'
import Comheader from '@/components/header/Comheader.vue'
import Scenario from '@/views/envmonitor/components/Scenario/Scenario.vue'
import Air from '@/views/envmonitor/components/Air.vue'
import Light from '@/views/envmonitor/components/Light.vue'
import Curtain from '@/views/envmonitor/components/Curtain.vue'
import TimeBox from '@/views/envmonitor/TimeBox.vue'
import NavBar from '@/views/envmonitor/NavBar.vue'
import { Icon, Popup, Dialog, Toast } from 'vant'
import { useRouter, useRoute } from 'vue-router'
import {
  getCompanyInfo,
  getWeather,
  getSpaceInfo,
  getMeetingSceneHttp,
  getSetTimeHttp,
  changeSetTimeHttp, getSpaceEquipType, getPermanentSpace, getUserControlAuth, getSpaceMode, getSpaceTemp
} from '@/apis/envmonitor'
import Keys from '@/constant/key'
import {
  formatDate,
  getHours,
  getLocalNewSpaceInfo,
  getUserInfo,
  parseImgUrl,
  setLocalNewSpaceInfo,
  setQueryConfig
} from '@/utils'
import { store } from '@/store'
import { UserMutationTypes } from '@/store/modules/user/mutation-types'
import { SpaceInfoModel } from '@/model/userModel'
import { getWorkType } from '@/utils/mapIcon'

export default defineComponent({
  components: {
    MapBox,
    Scenario,
    Header,
    Comheader,
    NavBar,
    Air,
    Light,
    Curtain,
    TimeBox,
    [Dialog.Component.name]: Dialog.Component,
    VanPopup: Popup,
    VanIcon: Icon
  },
  setup() {
    const router: any = useRouter()
    const route: any = useRoute()
    const document: any = window.document
    const screenHeight: any = document.body.clientHeight
    const outWeather: any = {}
    // 空间数据（包括空间下的设备的状态）
    const officeData: any = {}
    let spaceEqFlagObj: SpaceInfoModel = {
      hasAir: true, // 有无空调
      hasBlowing: false, // 空调有无 变风量系统
      hasLamp: false   //有无灯具
    }
    const popList: any = []
    // 空间类型
    let spaceInfo: any = {}
    const projectId: string = store.state.user.projectId
    const sceneDetail: any = {}
    const headerInfo: {
      headImg: any
      headScene: string
      tipText: string
      tipTextSwatch: boolean
    } = {
      headImg: '',
      headScene: '',
      tipText: '选择工作结束时间',
      tipTextSwatch: false
    }
    let spaceExistenceDevice: any = {
      'curtain': false,
      'light': false,
      'airConditioner': false,
      'bodySensor': false
    }
    let childRef: any = {}
    // let mapRef: any = {}
    let intervalTimer: any = null
    const workInfo: any = {}
    const userInfo: any = getUserInfo()
    let spaceTimer: any = null
    let listSen: any = [
      {
        id: 0,
        code: 'DISCUSSING',
        name: '会议模式',
        img: 'scene_work.svg',
        checked: true,
        textObj: [
          {
            text: '照明灯光已全部为您开启',
            status: 'ok'
          },
          {
            text: '演示设备已为您准备',
            status: 'ok'
          },
          {
            text: '空调已为您开启',
            type: 'air',
            status: 'ok'
          }
        ]
      },
      {
        id: 1,
        code: 'PROJECTING',
        name: '投影模式',
        img: 'scene_visitor.svg',
        checked: false,
        textObj: [
          {
            text: '主灯已为您关闭，氛围灯为您开启',
            status: 'ok'
          },
          {
            text: '演示设备已为您开启',
            status: 'ok'
          },
          {
            text: '空调已为您开启',
            type: 'air',
            status: 'ok'
          },
          {
            text: '窗帘已为您关闭',
            status: 'ok'
          }
        ]
      },
      {
        id: 2,
        code: 'ADJOURNMENT',
        name: '全关模式',
        img: 'scene_rest.svg',
        checked: false,
        textObj: [
          {
            text: '照明灯光2min后将全部关闭',
            status: 'ok'
          },
          {
            text: '演示设备已为您关闭',
            status: 'ok'
          },
          {
            text: '空调全部关闭',
            type: 'air',
            status: 'ok'
          },
          {
            text: '窗帘已为您关闭',
            status: 'ok'
          }
        ]
      }
    ]
    let userSpaceInfo: any = []
    let spaceModelTimer: any = null
    let spaceTempTimer: any = null
    let envlist: any = [
      {
        id: 0,
        name: 'CO₂',
        num: '',
        level: '',
        funcid: 'CO2',
        code: 'co2'
      },
      {
        id: 1,
        name: 'PM2.5',
        num: '',
        level: '',
        funcid: 'PM2d5',
        code: 'pm25'
      },
      {
        id: 2,
        name: '甲醛',
        num: '',
        level: '',
        funcid: 'HCHO',
        code: 'jiaquan'
      },
      {
        id: 3,
        name: '湿度',
        num: '',
        level: '',
        funcid: 'Tdb,RH',
        code: 'shidu'
      }
    ]
    let realEevList: any = []    // 解决v-if报错的问题临时使用
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      localName: '',
      airTemp: '',
      userIsControl: false,
      spaceModelTimer: spaceModelTimer,
      spaceTempTimer: spaceTempTimer,
      userSpaceInfo: userSpaceInfo,
      spaceTimer: spaceTimer,
      workInfo: workInfo,
      intervalTimer: intervalTimer,
      roomType: '',
      showSpaceTip: false,
      mapOpacity: 0,
      opacityV: 1,
      childRef: childRef,
      // mapRef: mapRef,
      hideTopImg: false,
      isBottom: false,
      isScrool: false,
      officeData: officeData,
      popList: popList,
      popupType: 'scenario',
      showSecenDetailDalig: false,
      sceneDetail: sceneDetail,
      showScenario: false,
      projectId: projectId,
      spaceInfo: spaceInfo,
      headerInfo: headerInfo,
      topbgimg: '',
      userInfo: userInfo,
      deviceIcon: 'arrow',
      visible: false,
      outWeather: outWeather,
      vanPopupIndex: '',
      spaceEqFlagObj: spaceEqFlagObj,
      spaceExistenceDevice: spaceExistenceDevice,
      listOffice: [
        {
          id: 0,
          name: '工作',
          code: 'work',
          img: 'scene_work.svg',
          checked: true,
          textObj: [
            {
              text: '办公区灯光已全部为您开启',
              status: 'ok'
            },
            {
              text: '正在将温度调至 26℃',
              status: 'ok'
            },
            {
              text: '窗帘已为您全部打开',
              status: 'ok'
            },
            {
              text: '饮用水已为您准备',
              status: 'ok'
            }

          ]
        },
        {
          id: 1,
          name: '会客',
          code: 'guest',
          img: 'scene_visitor.svg',
          checked: false,
          textObj: [
            {
              text: '会客区照明已为您开启',
              status: 'ok'
            },
            {
              text: '空调已为您切换至会客温度，目标温度24℃',
              status: 'ok'
            },
            {
              text: '窗帘已为您全部开启',
              status: 'ok'
            },
            {
              text: '演示设备已为您准备',
              status: 'ok'
            },
            {
              text: '饮用水已为您准备',
              status: 'ok'
            }
          ]
        },
        {
          id: 2,
          name: '休息',
          code: 'rest',
          img: 'scene_rest.svg',
          checked: false,
          textObj: [
            {
              text: '主灯已关闭，氛围灯将为您开启',
              status: 'ok'
            },
            {
              text: '空调将为您调节至适宜休息的温度，目标温度26℃',
              status: 'ok'
            },
            {
              text: '窗帘已为您全部关闭',
              status: 'ok'
            }
          ]
        }
      ],
      listSen: listSen,
      isACATVA: false,
      showWorkOff: false,// 开放办公室的 提前关闭是否展示
      envlist: envlist,
      realEevList: realEevList,
      navList: [
        {
          top: 0,
          id: 'airId',
          code: 'air',
          name: '温度/湿度',
          noShow: true,
          img: parseImgUrl('page-officehome', 'temp.png'),
          activeImg: parseImgUrl('page-officehome', 'temp_active.svg')
        },
        {
          top: 0,
          id: 'lightId',
          code: 'lamp',
          name: '光照',
          noShow: false,
          img: parseImgUrl('page-officehome', 'lamp.png'),
          activeImg: parseImgUrl('page-officehome', 'lamp_active.svg')
        },
        {
          top: 0,
          id: 'curtainId',
          code: 'curtain',
          name: '窗帘',
          noShow: false,
          img: parseImgUrl('page-officehome', 'curtain-nav.svg'),
          activeImg: parseImgUrl('page-officehome', 'curtain-nav-active.svg')
        },
        {
          top: 0,
          id: 4,
          code: 'mySpace',
          name: '常驻空间',
          noShow: false,
          activeImg: parseImgUrl('page-officehome', 'mySpaceIcon.svg'),
          img: parseImgUrl('page-officehome', 'mySpaceIcon.svg')
        },
        {
          top: 0,
          id: 5,
          code: 'switchSpace',
          name: '我的',
          noShow: true,
          activeImg: parseImgUrl('page-officehome', 'mapIcon.png'),
          img: parseImgUrl('page-officehome', 'mapIcon.png')
        }
      ],
      // 上班=ATWORK 讨论=DISCUSSING 投影=PROJECTING 散会=ADJOURNMENT 下班=OFFWORK
      meetingRoomSence: [
        {
          code: 'DISCUSSING',
          name: '讨论'
        },
        {
          code: 'PROJECTING',
          name: '演示'
        },
        {
          code: 'ADJOURNMENT',
          name: '散会'
        }
      ],
      nextCusStartTime: 0, // 第二天服务定制开始时间
      cusEndTime: 0,
      cusStartTime: 0, // 当天服务定制-开始时间
      /**
       * 修改空间id
       * @param spaceId
       */
      changeSpaceId(spaceId: any) {
        proxyData.loadingStart()
        proxyData.spaceInfo.spaceId = spaceId
        proxyData.headerInfo.headScene = ''
        // 切换空间的时候先清除定时器
        proxyData.clearTimerSpaceInfo()
        proxyData.init()
        // 判断用户是否有可控制权限
        proxyData.checkUserSpace()
      },
      /**
       *
       * @param item
       */
      handleDetail(item: any) {
        router.push({
          path: '/envmonitor-detail',
          query: {
            funcid: item.funcid,
            spaceId: proxyData.spaceInfo.spaceId
          }
        })
      },
      // 获取公司信息
      async getCompanyInfo() {
        const res: any = await getCompanyInfo({ companyId: Keys.companyKey })
        const data = res.data
        // store.commit(UserMutationTypes.SET_PROJECT_ID, 'Pj1101080259')
        // const location: any = data.sagaCareCoords.split(',')
        // const targetLocationInfo: any = {
        //   longitude: location[0],
        //   latitude: location[1]
        // }
        // console.log(targetLocationInfo)
      },
      // 获取天气信息
      getWeather() {
        const params: any = {
          openid: proxyData.userInfo.openid,
          pubname: proxyData.userInfo.pubname,
          projectId: store.state.user.projectId
        }
        const str: string = setQueryConfig(params)
        getWeather(str).then(res => {
          const content: any = res?.content ?? {}
          proxyData.outWeather = content
          const text: string = content.text
          proxyData.getWeatherIcon(text)
          proxyData.getnowTime(text)
        })
      },
      // 设置当前背景图
      getnowTime(text: string) { // 头部背景图片
        const now = getHours()
        if (text.indexOf('霾') > -1) {
          proxyData.topbgimg = parseImgUrl('weather', 'office_smog.jpg')
        } else {
          if (now >= 6 && now < 19) {
            // 白天
            proxyData.topbgimg = parseImgUrl('weather', 'office_bright.jpg')
          } else {
            // 夜晚
            proxyData.topbgimg = parseImgUrl('weather', 'office_night.jpg')
          }
        }
      },
      // 设置天气icon
      getWeatherIcon(text: string) {
        if (text && text.indexOf('晴') > -1) {
          proxyData.outWeather.imgname = parseImgUrl('weather', 'sun.png')
        } else if (text && text.indexOf('雨') > -1) {
          proxyData.outWeather.imgname = parseImgUrl('weather', 'rain.png')
        } else if (text && text.indexOf('阴') > -1 || text.indexOf('云') > -1) {
          proxyData.outWeather.imgname = parseImgUrl('weather', 'cloudy.png')
        } else if (text && text.indexOf('霾') > -1) {
          proxyData.outWeather.imgname = parseImgUrl('weather', 'mai.png')
        } else if (text && text.indexOf('雾') > -1) {
          proxyData.outWeather.imgname = parseImgUrl('weather', 'fog.png')
        } else if (text && text.indexOf('风') > -1) {
          proxyData.outWeather.imgname = parseImgUrl('weather', 'wind.png')
        } else if (text && text.indexOf('雷') > -1) {
          proxyData.outWeather.imgname = parseImgUrl('weather', 'thunder.png')
        } else {
          proxyData.outWeather.imgname = parseImgUrl('weather', 'sun.png')
        }
      },
      // 判断空间类型
      checkSpaceType(roomFuncType: string) {
        let roomType: any = getWorkType(roomFuncType)
        if (roomType === '个人') {
          proxyData.roomType = '个人'
          proxyData.headerInfo.headImg = parseImgUrl('page-officehome', 'office_person_2.png')
          proxyData.headerInfo.headScene = '工作'
          proxyData.popList = proxyData.listOffice
        } else if (roomType === '会议室') {
          proxyData.roomType = '会议室'
          proxyData.popList = JSON.parse(JSON.stringify(proxyData.listSen))
          proxyData.headerInfo.headImg = parseImgUrl('page-officehome', 'office_normal_2.png')
          // 获取会议室场
          proxyData.getPageMeetingSceneHttp()
        } else if (roomType === '开放') {
          proxyData.roomType = '开放'
          proxyData.headerInfo.headImg = parseImgUrl('page-officehome', 'office_publi_2.png')
        } else {
          proxyData.roomType = '其它'
          proxyData.headerInfo.headImg = parseImgUrl('page-officehome', 'office_publi_2.png')
        }
        if (roomType !== '会议室') {
          proxyData.timerSpaceInfo()
        }
      },
      /**
       * 检查用户可使用的权限
       */
      checkUserSpace() {
        let flag: any = false
        // let flag: any = true
        for (let i = 0; i < proxyData.userSpaceInfo.length; i++) {
          if (proxyData.spaceInfo.spaceId === proxyData.userSpaceInfo[i].sp_id) {
            flag = true
            break
          }
        }
        proxyData.userIsControl = flag
      },
      /**
       * 获取用户控制权限
       */
      getUserControlAuth() {
        getUserControlAuth().then(res => {
          let resData: any = res
          if (resData.result === 'success') {
            proxyData.userSpaceInfo = resData.data
          } else {
            proxyData.userSpaceInfo = []
          }
          proxyData.checkUserSpace()
        }).catch(() => {
          proxyData.userSpaceInfo = []
          proxyData.checkUserSpace()
        })
      },
      // 获取空间信息
      getSpaceInfo() {
        // const userInfo =
        const data: any = {
          criteria: {
            spaceId: proxyData.spaceInfo.spaceId,
            projectId: proxyData.userInfo.projectId
          },
          pubname: proxyData.userInfo.pubname,
          openid: proxyData.userInfo.openid
        }
        getSpaceInfo(data).then(res => {
          const content: any = res?.content ?? []
          proxyData.officeData = content[0] ? content[0] : {}
          if (proxyData.officeData.localName) {
            proxyData.localName = proxyData.officeData.localName
          }
          if (proxyData.officeData.temperature) {
            proxyData.officeData.temperature = proxyData.officeData.temperature.toFixed(2) * 1
          }
          // 环境数据
          proxyData.checkSpaceType(proxyData.officeData.roomFuncType)
          proxyData.formatSpaceInfo(content)
          proxyData.setPageheight()
          proxyData.loadinngEnd()
        }).catch(() => {
          proxyData.loadinngEnd()
        })
      },
      // 定时调获取空调接口
      getSpaceModeTimer() {
        proxyData.spaceModelTimer = setTimeout(() => {
          proxyData.getSpaceMode()
          clearTimeout(proxyData.spaceModelTimer)
          proxyData.spaceModelTimer = null
        }, 1000)
      },
      // 获取运行模式
      getSpaceMode() {
        getSpaceMode().then(res => {
          proxyData.getSpaceModeTimer()
        }).catch(() => {
          proxyData.getSpaceModeTimer()
        })
      },
      // 定时调用获取温度
      getSpaceTempTimer() {
        proxyData.spaceTempTimer = setTimeout(() => {
          clearTimeout(proxyData.spaceTempTimer)
          proxyData.spaceTempTimer = null
          proxyData.getSpaceTemp()
        })
      },
      // 获取空间空调设备温度
      getSpaceTemp() {
        getSpaceTemp().then(res => {
          proxyData.getSpaceTempTimer()
        }).catch(() => {
          proxyData.getSpaceTempTimer()
        })
      },
      checkLevel(value: string, name: string) {
        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: ['健康', '超标']
          }
        }
        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
        }
      },
      /**
       *设置当前页面的高度
       */
      setPageheight() {
        nextTick(() => {
          document.getElementById('envBox').style.height = document.getElementById('envBox').offsetHeight + 'px'
        })
      },
      // 空间信息数据格式化
      formatSpaceInfo(content: any = []) {
        proxyData.realEevList = []
        for (let i = 0; i < content.length; i++) {
          let item = content[i]
          if (item.co2 || item.co2 == 0) {
            proxyData.envlist[0].level = proxyData.checkLevel(item.co2, 'co2').levelTxt
            proxyData.envlist[0].num = item.co2
          } else {
            proxyData.envlist[0].level = ''
            proxyData.envlist[0].num = ''
          }
          if (item.pm25 || item.pm25 === 0) {
            proxyData.envlist[1].level = proxyData.checkLevel(item.pm25, 'pm25').levelTxt
            proxyData.envlist[1].num = item.pm25
          } else {
            proxyData.envlist[1].level = ''
            proxyData.envlist[1].num = ''
          }
          if (item.hcho || item.hcho == 0) {
            proxyData.envlist[2].level = proxyData.checkLevel(item.hcho, 'hcho').levelTxt
            proxyData.envlist[2].num = item.hcho.toFixed(2)
          } else {
            proxyData.envlist[2].level = ''
            proxyData.envlist[2].num = ''
          }
          if (item.humidity || item.humidity == 0) {
            proxyData.envlist[3].level = proxyData.checkLevel(item.humidity, 'humidity').levelTxt
            proxyData.envlist[3].num = item.humidity.toFixed(0)
          } else {
            proxyData.envlist[3].level = ''
            proxyData.envlist[3].num = ''
          }
        }
        // 只展示有数据的（之江定制）
        for (let i = 0; i < proxyData.envlist.length; i++) {
          if (proxyData.envlist[i].num) {
            proxyData.realEevList.push(proxyData.envlist[i])
          }
        }
        // 切换空间修改底部的位置
        proxyData.updateBottomPerstion()
      },
      // 获取会议室场景（如果是会议室的才调此接口）
      getPageMeetingSceneHttp() {
        const params: { spaceId: string } = {
          spaceId: proxyData.spaceInfo.spaceId
        }
        getMeetingSceneHttp(params).then(res => {
          // console.log('res====')
          // console.log(res)
          // debugger
          let resSen: string = res?.content ?? ''
          if (resSen === 'OFFWORK') {
            resSen = 'ADJOURNMENT'
          }
          let filterArr: any = []
          proxyData.listSen.map((item: any) => {
            if (item.code === resSen) {
              filterArr.push(item)
            }
          })
          // console.log('filterArr===')
          // console.log(filterArr)
          // debugger
          // // 根据code 获取场景的名字
          proxyData.headerInfo.headScene = filterArr[0] && filterArr[0].name ? filterArr[0].name : '全关模式'
          proxyData.vanPopupIndex = resSen ? resSen : ''
          // 定时调空间数据
          proxyData.timerSpaceInfo()
        }).catch(() => {
          proxyData.timerSpaceInfo()
        })
      },
      // 设置场景名称
      setHeadScene(headScene: any, data: any) {
        // console.log('场景刷新===')
        proxyData.headerInfo.headScene = headScene
        proxyData.sceneDetail = data
        proxyData.setHeadSceneAirTemp()
        // 隐藏当前弹窗
        proxyData.showScenario = false
        proxyData.showSecenDetailDalig = true
      },
      // 获取空调设备温度
      updateAirTemp(airTemp: any) {
        proxyData.airTemp = airTemp
        proxyData.setHeadSceneAirTemp()
      },
      // 设置场景切换时候的温度
      setHeadSceneAirTemp() {
        if (proxyData.sceneDetail && proxyData.sceneDetail.textObj && proxyData.sceneDetail.textObj.length) {
          if (proxyData.airTemp && (proxyData.sceneDetail.code == 'DISCUSSING' || proxyData.sceneDetail.code == 'PROJECTING')) {
            for (let i = 0; i < proxyData.sceneDetail.textObj.length; i++) {
              let item: any = proxyData.sceneDetail.textObj
              if (item.type === 'air') {
                item.text = item.text + '，目标温度' + proxyData.airTemp
              }
            }
          }
        }
      },
      // 修改加班时间
      setWorkTime() {
        proxyData.showScenario = false
        // 修改成功后获取服务定制时间
        proxyData.setTime()
      },
      // 提前关闭
      handlePreClose() {
        let endDate: any = formatDate()
        let endTime: any = getHours()
        if (endTime < 10) {
          endTime = `0${endTime}`
        }
        const params = {
          'projectId': proxyData.projectId,
          'objectId': proxyData.spaceInfo.spaceId,         // 空间ID
          'endDate': endDate,      // 结束日期  "20210310",
          'endTime': endTime + '0000',        // 结束时间 "090000"
          'type': 3                        // 0 预约加班，1 取消，2 我来了/确定, 3 我走了
        }
        changeSetTimeHttp(params).then(res => {
          const resData: any = res
          if (resData.result == 'success') {
            proxyData.changeLampStatus()
          }
        })
      },
      // 提前关闭更改状态
      changeLampStatus() {
        proxyData.showWorkOff = false
        proxyData.headerInfo.tipText = '选择工作结束时间'
        proxyData.headerInfo.tipTextSwatch = true
      },
      // 获取空间下的设备信息
      getEquipments() {
        let params: { spaceId: string, projectId: string } = {
          spaceId: proxyData.spaceInfo.spaceId,
          projectId: proxyData.projectId
        }
        /**
         *重新获取设备的时候，先初始化数据
         */
        proxyData.spaceExistenceDevice = {
          'curtain': false,
          'light': false,
          'airConditioner': false,
          'bodySensor': false
        }
        let queryParams: any = setQueryConfig(params)
        getSpaceEquipType(queryParams).then(res => {
          let resData: any = res
          if (resData.result === 'success') {
            let data: any = resData?.data ?? []
            for (let i = 0; i < data.length; i++) {
              proxyData.spaceExistenceDevice[data[i]] = true
            }
            // if (proxyData.spaceExistenceDevice.airConditioner) {
            //   proxyData.navList[0].noShow = true
            // } else {
            //   proxyData.navList[0].noShow = false
            // }
            // debugger
            if (proxyData.spaceExistenceDevice.light) {
              proxyData.navList[1].noShow = true
            } else {
              proxyData.navList[1].noShow = false
            }
            if (proxyData.spaceExistenceDevice.curtain) {
              proxyData.navList[2].noShow = true
            } else {
              proxyData.navList[2].noShow = false
            }
          }
        })
      },
      // 时间格式转换
      hourMiChange(tempStr: number) {
        // 转为时间 19.3 - 19:30 19.41-19:41 19-19:00
        let str = tempStr.toString()
        let newStr = ''
        let dLen = str.length > 2 ? str.split('.')[1].length : str
        if (dLen === 1) {
          str = str.replace('.', '') + '0'
          newStr = str.slice(0, 2) + ':' + str.slice(2)
        } else if (dLen === 2) {
          str = str.replace('.', '')
          newStr = str.slice(0, 2) + ':' + str.slice(2)
        } else {
          newStr = str + ':00'
        }
        return newStr
      },
      // 获取灯灯定制时间
      getSetTimeHttp() {
        const params: { spaceId: string } = {
          spaceId: proxyData.spaceInfo.spaceId
        }
        getSetTimeHttp(params).then(res => {
          const resData = res
          // debugger
          const content = resData?.content ?? {}
          // proxyData.workInfo = content
          /* 可选日期和时间的规则是：
          当下时间至次日服务定制开始时间；
          如果没有服务定制时间，
          默认次日8:00 */
          proxyData.nextCusStartTime = content.nextCusStartTime ? Math.floor(Number(content.nextCusStartTime / 10000)) : 9
          /* 当时间早于  当天服务定制开始时间且不早于2个小时，当前时间-当天服务开始时间 ；
                否则，当天服务结束时间为开始-明天服务定制开始时间/明天8点
            */
          let date = formatDate('')
          let tomText: string = ''        // 明天 文案
          let now = getHours()     // 用户的时间
          let cusEndTime: number = 0    // 服务定制 - 开始时间
          let cusStartTime: number = 0   // 服务定制 - 结束时间
          let changTime: number = 0     // 修改后的时间
          proxyData.showWorkOff = false   // 不显示提前关闭

          /*
              先判断服务定制时间是否跨天，跨天以第二天的开始时间为准
            */
          // 修改以后的时间 endDate 和 endTime
          // 当天
          // debugger
          if (content.endDate && date === content.endDate) {
            changTime = Number(content.endTime / 10000)
            tomText = ''
          }
          // 修改到明天
          if (content.endDate && date !== content.endDate) {
            changTime = Number(content.endTime / 10000)  // 今天的时间肯定小于明天的 所以+24
            tomText = '明天'
          }

          /* 无服务定制时间：
              --- 时间弹窗 ----
              今天显示：当前时间开始，默认是当前时间+2小时
              次日显示：00点 - 8点
              --- 有设置时间 ---
              1、 且 设置时间在当前时间之后，显示设置时间
              2、 且在当前时间之前，显示选择结束时间
          */
          // 无服务定制时间
          if (!content.nextCusEndTime && !content.cusStartTime && content.endDate) {
            let daTime = tomText ? changTime + 24 : changTime
            // console.log('无服务定制', daTime);
            if (now < daTime) {
              proxyData.headerInfo.tipText = `${tomText}${proxyData.hourMiChange(changTime)}`
              proxyData.headerInfo.tipTextSwatch = false
              proxyData.showWorkOff = true // 提前关闭
              proxyData.workInfo.textTime = proxyData.hourMiChange(changTime)
              proxyData.workInfo.text = tomText ? tomText : '今天'
            } else {
              proxyData.headerInfo.tipText = '选择工作结束时间'
              proxyData.headerInfo.tipTextSwatch = true
              proxyData.workInfo.textTime = ''
              proxyData.workInfo.text = ''
            }
          } else {
            proxyData.headerInfo.tipText = '选择工作结束时间'
            proxyData.headerInfo.tipTextSwatch = true
            proxyData.workInfo.textTime = ''
            proxyData.workInfo.text = ''
          }

          if (!content.cusEndTime) {
            proxyData.cusStartTime = 0 // 今天的服务定制开始时间
            proxyData.cusEndTime = 0 // 今天结束时间
            return
          }
          // 无服务定制不走下面的代码
          /*
                有服务定制：
                    当天进来时间、用户修改时间、当天服务定制时间 显示判断;
                    1、今天没有，明天有
                    2、今天有，明天没有
                    3、今天有，明天有
            */
          if (content.cusEndTime) {
            cusStartTime = content.cusStartTime ? Number(content.cusStartTime / 10000) : 0
            cusEndTime = content.cusEndTime ? Number(content.cusEndTime / 10000) : 0
            proxyData.cusStartTime = Math.floor(cusStartTime)  // 今天的服务定制开始时间
            proxyData.cusEndTime = Math.floor(cusEndTime)  // 今天的服务定制结束时间
          }
          // 1、用户时间 服务定制时间之内
          // debugger
          if (now >= cusStartTime && now < cusEndTime && !changTime) {
            // console.log('当前时间，服务定制之内，没有更改时间')
            proxyData.headerInfo.tipText = `${tomText}${proxyData.hourMiChange(cusEndTime)}`
            proxyData.headerInfo.tipTextSwatch = false
          } else if (now >= cusStartTime && now < cusEndTime && changTime) {
            const daTime = (tomText ? changTime + 24 : changTime) > now ? changTime : cusEndTime
            // console.log('当前时间，服务定制之内，有更改时间', daTime)
            proxyData.headerInfo.tipText = `${tomText}${proxyData.hourMiChange(daTime)}`
            proxyData.headerInfo.tipTextSwatch = false
            proxyData.workInfo.textTime = proxyData.hourMiChange(daTime)
            proxyData.workInfo.text = tomText ? tomText : '今天'
          } else if (now >= cusEndTime && changTime) {//大于服务定制时间
            // (tomText ? changTime + 24 : changTime) 判断changeTime是否跨天
            if ((tomText ? changTime + 24 : changTime) >= now) {
              // console.log('当前时间，服务定制之外，有更改时间且 修改时间大于当前');
              cusEndTime = changTime
              proxyData.headerInfo.tipText = `${tomText}${proxyData.hourMiChange(cusEndTime)}`
              proxyData.headerInfo.tipTextSwatch = false
              proxyData.showWorkOff = true
              proxyData.workInfo.textTime = proxyData.hourMiChange(cusEndTime)
              proxyData.workInfo.text = tomText ? tomText : '今天'
            } else {
              // console.log('当前时间，服务定制之外，有更改时间且 修改时间小于当前')
              proxyData.headerInfo.tipTextSwatch = true
              proxyData.headerInfo.tipText = '选择工作结束时间'
              proxyData.workInfo.textTime = ''
              proxyData.workInfo.text = ''
            }
          } else {
            // proxyData.headerInfo.tipTextSwatch = false
            proxyData.headerInfo.tipTextSwatch = true
            proxyData.headerInfo.tipText = '选择工作结束时间'
            // proxyData.headerInfo.tipText = `${tomText}${proxyData.hourMiChange(cusEndTime)}`
            proxyData.workInfo.textTime = ''
            proxyData.workInfo.text = ''
          }
        })
      },
      // 设置设备的关闭时间
      setTime() {
        proxyData.getSetTimeHttp()
      },
      // 点击切换会议室场景
      handlePopup(type: string = 'scenario') {
        if (proxyData.userIsControl) {
          proxyData.showScenario = !proxyData.showScenario
          if (proxyData.showScenario) {
            proxyData.deviceIcon = 'arrow-down'
          } else {
            proxyData.deviceIcon = 'arrow'
          }
          proxyData.popupType = type
        } else {
          Toast('您没有当前空间的控制权限！')
        }
      },
      /**
       *  当没有环境参数的时候更新页面的位置
       */
      updateBottomPerstion() {
        if (proxyData.isBottom) {
          let ele: any = document.getElementById('envContent')
          let houseEle: any = document.getElementById('houseDes')
          let houseHeight: any = houseEle.offsetHeight
          ele.style.top = (screenHeight - houseHeight) + 'px'
        }
      },
      // 切换空间
      triggerCheckSpace() {
        let ele: any = document.getElementById('envContent')
        let houseEle: any = document.getElementById('houseDes')
        let houseHeight: any = houseEle.offsetHeight
        proxyData.opacityV = 0
        proxyData.mapOpacity = 1
        ele.scrollTop = 0
        let top: any = 0
        let interval: any = setInterval(() => {
          top = top + 15
          if (top < screenHeight - houseHeight) {
            ele.style.top = top + 'px'
          } else {
            ele.style.top = (screenHeight - houseHeight) + 'px'
            clearInterval(interval)
          }
        }, 10)
        proxyData.hideTopImg = true
        proxyData.isBottom = true
      },
      /**
       * 切换导航滑动页面
       */
      changeNav(item: any) {
        if (item.code === 'switchSpace') {
          proxyData.triggerCheckSpace()
        } else if (item.code === 'mySpace') {  // 查看常驻空间
          proxyData.getPermanentSpace()
        } else {
          nextTick(() => {
            let activeNav: any = proxyData.setNarTop()
            let envContentEle: any = document.getElementById('envContent')
            activeNav.map((navItem: any, index: any) => {
              if (index === 0) {
                envContentEle.scrollTop = 0
                return
              }
              if (item.code === navItem.code) {
                envContentEle.scrollTop = navItem.top
                return
              }
            })
          })
        }
      },
      /**
       * 加载loading
       */
      loadingStart() {
        Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: '加载中...'
        })
      },
      /**
       * 结束
       */
      loadinngEnd() {
        Toast.clear()
      },
      /**
       *  获取常驻空间
       */
      getPermanentSpace() {
        proxyData.loadingStart()
        getPermanentSpace().then(res => {
          // debugger
          let resResult: any = res
          if (resResult.result === 'success') {
            proxyData.spaceInfo = resResult.data
            // 判断用户控制权限
            proxyData.getUserControlAuth()
            proxyData.init()
            nextTick(() => {
              // proxyData.mapRef.init(proxyData.spaceInfo)
            })
          }
          proxyData.loadinngEnd()
        }).catch(() => {
          proxyData.loadinngEnd()
        })
      },
      /**
       * 判断当前用户是否设置过常驻空间
       */
      checkPermanetSpace() {
        getPermanentSpace().then(res => {
          let resResult: any = res ? res : {}
          if (resResult.result === 'success') {
            if (resResult.data && resResult.data.isPermanent) {
              proxyData.navList[3].noShow = true
            } else {
              proxyData.navList[3].noShow = false
            }
          }
          proxyData.loadinngEnd()
        }).catch(() => {
          proxyData.loadinngEnd()
        })
      }
      ,
      /**
       * 设置导航的id
       */
      setNarTop() {
        let navHeight: any = document.getElementById('nav').offsetHeight
        let activeNav: any = proxyData.navList.filter((item: any, index: any) => {
          if (item.noShow && index < 3) {
            return item
          }
        })
        activeNav.map((item: any) => {
          let id: any = item.id
          if (id) {
            let cardEle = document.getElementById(id)
            if (cardEle) {
              let cartHeight = cardEle.offsetHeight
              item.cartHeight = cartHeight
              let top: any = cardEle.offsetTop - screenHeight / 2 + cartHeight / 2 + navHeight / 2
              item.top = top
            }
          }
        })
        return activeNav
      }
      ,
      /**
       * 获取竖着的方向
       */
      envScrollTop() {
        let envContentEle: any = document.getElementById('envContent')
        envContentEle.addEventListener('scroll', () => {
          if (!proxyData.isBottom) {
            let scrollTop = envContentEle.scrollTop
            let activeNav: any = proxyData.setNarTop()
            activeNav.map((item: any, index: any) => {
              if (index > 0) {
                if (scrollTop <= item.top && scrollTop > activeNav[index - 1].top) {
                  proxyData.childRef.setActiveCode(item.code)
                }
              } else {
                if (scrollTop <= item.top) {
                  proxyData.childRef.setActiveCode(item.code)
                }
              }

            })
          }
        })

      }
      ,
      /**
       * 设备滑动效果
       */
      envmonitorMove() {
        let ele: any = document.getElementById('envContent')
        let houseEle: any = document.getElementById('houseDes')
        let houseImgEle: any = document.getElementById('house')
        let top: number = 0
        let nowTop: number = 0
        let temp: number = 0
        const tempMove: number = 60
        let houseHeight: number = 0
        let houseImgHeight: number = 0
        let beginY: any, endY: any, moveY: any = 0
        ele.addEventListener('touchstart', function(event: any) {
          event.stopPropagation()
          houseHeight = houseEle.offsetHeight
          // console.log('houseHeight===')
          // console.log(houseHeight)
          houseImgHeight = houseImgEle.offsetHeight
          beginY = event.targetTouches[0].pageY
          top = parseInt(ele.style.top) ? parseInt(ele.style.top) : 0
          temp = 0.01
        })
        ele.addEventListener('touchmove', function(event: any) {
          event.stopPropagation()
          nowTop = parseInt(ele.style.top) ? parseInt(ele.style.top) : 0
          endY = event.targetTouches[0].pageY
          moveY = endY - beginY
          temp = temp + 0.01
          if (moveY > 0) { // 向下
            proxyData.opacityV = 1 - temp <= 0 ? 0 : 1 - temp
            if (moveY > tempMove) {
              proxyData.hideTopImg = true
              proxyData.mapOpacity = 1 + temp >= 1 ? 1 : 1 + temp
            } else {
              proxyData.hideTopImg = false
            }
            if (proxyData.hideTopImg) {
              ele.style.top = moveY + (245 - 50) + 'px'
            } else {
              ele.style.top = moveY + 'px'
            }
          } else { //  向上
            if (nowTop <= 0) {  // 滑动顶部后不让再滑动
              ele.style.top = 0 + 'px'
            } else {
              if (Math.abs(top + moveY) <= 256) {
                proxyData.hideTopImg = false
                proxyData.opacityV = temp <= 1 ? temp : 1
                proxyData.mapOpacity = 1 - temp <= 0 ? 0 : 1 - temp
                ele.style.top = top + moveY - 256 + 'px'
              } else {
                proxyData.hideTopImg = true
                proxyData.mapOpacity = temp <= 1 ? temp : 1
                ele.style.top = top + moveY + 'px'
              }
              if (Math.abs(moveY) > houseHeight) {
                proxyData.mapOpacity = 0
                proxyData.isBottom = false
              }
            }
          }
        })
        ele.addEventListener('touchend', function(event: any) {
          if (moveY === 0) {
            return
          }
          event.stopPropagation()
          if (moveY > 0) {  // 向下
            if (moveY > tempMove) {
              proxyData.hideTopImg = true
            } else {
              proxyData.hideTopImg = false
            }
          } else { //向上
            if (Math.abs(moveY) > tempMove) {
              proxyData.hideTopImg = false
            } else {
              proxyData.hideTopImg = true
            }
          }
          if (proxyData.hideTopImg) {
            proxyData.opacityV = 0
            proxyData.mapOpacity = 1
            ele.style.top = (screenHeight - houseHeight) + 'px'
            proxyData.isBottom = true
          } else {
            proxyData.opacityV = 1
            proxyData.mapOpacity = 0
            if (nowTop <= 0) {  // 页面滚动
              ele.style.top = 0 + 'px'
            } else {
              ele.style.top = 0 + 'px'
            }
            proxyData.isBottom = false
          }
        })
      }
      ,
      // 关闭提示弹窗
      closeTip() {
        proxyData.showSpaceTip = false
        clearInterval(proxyData.intervalTimer)
      }
      ,
      // 清除定时器
      clearTimerSpaceInfo() {
        if (proxyData.spaceTimer) {
          clearTimeout(proxyData.spaceTimer)
          proxyData.spaceTimer = null
        }
      },

      // 定时调空间
      timerSpaceInfo() {
        proxyData.clearTimerSpaceInfo()
        proxyData.spaceTimer = setTimeout(() => {
          proxyData.getSpaceInfo()
        }, 2000)
      },
      /**
       * 空间相关的接口
       */
      init() {
        proxyData.getSpaceInfo()
        proxyData.timerSpaceInfo()
        // 获取空间下的设备信息
        proxyData.getEquipments()
        proxyData.setTime()
        // 定时获取空间模式
        // proxyData.getSpaceModeTimer()
      },
      /**
       *删除参数
       */
      updatePageUrl() {
        let history: any = window.history
        let url: any = window.location.origin + window.location.pathname
        history.replaceState('', '', url)
      },
      // 定时关闭提示框
      setTimerCloseTip() {
        let timeNum: number = 0
        proxyData.intervalTimer = setInterval(() => {
          timeNum++
          if (timeNum > 2) {
            proxyData.showSpaceTip = false
            clearInterval(proxyData.intervalTimer)
            proxyData.updatePageUrl()
          }
        }, 1000)
      }
      // 存储当前项目id
    })
    nextTick(() => {
      proxyData.envmonitorMove()
      proxyData.envScrollTop()
    })
    onBeforeUnmount(() => {
      if (proxyData.spaceTimer) {
        clearTimeout(proxyData.spaceTimer)
        proxyData.spaceTimer = null
      }
    })
    onMounted(() => {
      if (route.query.showSpaceTip === 'true') {
        proxyData.showSpaceTip = true
        proxyData.setTimerCloseTip()
      } else {
        proxyData.showSpaceTip = false
      }
      // 获取天气信息
      proxyData.spaceInfo = getLocalNewSpaceInfo()
      if (proxyData.spaceInfo && proxyData.spaceInfo.spaceId) {
        // 判断用户控制权限
        proxyData.getUserControlAuth()
        proxyData.init()
      } else {
        proxyData.getPermanentSpace()
      }
      proxyData.checkPermanetSpace()
      proxyData.getWeather()
    })
    return {
      ...toRefs(proxyData)
    }
  }

})
</script>
<style lang="scss" scoped>
.envmonitor {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .map-content {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 120px;
    //overflow: scroll;
    overflow: hidden;
    z-index: 222;
    padding-top: 10px;
    background: #f7f8fa;
  }

  .top-bg {
    width: 100%;
    height: 256px;
    border: none;
  }

  .envmonitor-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 333;
    overflow: auto;
  }

  .envmonitor-box {
    //position: relative;
    //height: auto;
    width: 100%;
    height: 100%;
    //overflow-x: hidden;
    //z-index: 444;
  }

  .content {
    width: 88%;
    margin: 0 auto;
    padding-bottom: 200px;
  }

  .house {
    box-sizing: border-box;
    margin-top: -242px;
    height: 207px;
    background: #FFFFFF;
    //border-bottom: 5px solid #FFFFFF;
    border-bottom: none;
    //box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 25px 25px 0 0;

    img {
      border-radius: 25px 25px 0 0;
      border-top: 8px solid #fff;
      border-right: 8px solid #fff;
      border-left: 8px solid #fff;
      //object-fit: contain;
      background: #fff;
      width: 100%;
      height: 100%;
    }
  }

  .house-des {
    position: relative;
    z-index: 111;
    width: 100%;
    //height: 128px;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #FFFFFF;
    border-top: none;
    margin-top: -1px;
    box-sizing: border-box;
    //box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
    .house-scrool-icon {
      position: absolute;
      top: 2px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .house-des-top {
    border-radius: 0 0 25px 25px;
  }

  .house-des-bottom {
    padding-top: 10px;
    border-radius: 25px 25px 0 0;
    box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.07), 0px -1px 1px rgba(0, 0, 0, 0.05);
  }

  .house-top {
    display: flex;
    height: 23px;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 23px;
    justify-content: space-between;

    .house-name {
      height: 23px;
      font-size: 18px;
    }

    .house-device {
      height: 23px;
      position: relative;
      text-align: right;
      padding-right: 15px;
      flex: 1;
      //width: 100px;
      font-family: PingFang SC;
      font-size: 14px;
      line-height: 14px;

      .btn-off-work {
        position: absolute;
        bottom: 50px;
        right: 10px;
        width: 64px;
        height: 20px;
        background: #000000;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        text-align: center;
        color: #ffffff;
      }

      span {
        display: inline-block;
        vertical-align: middle;
        line-height: 23px;
      }

      i {
        display: inline-block;
        vertical-align: middle;
        font-style: normal;
        padding: 0 3px;
        font-size: 18px;
      }

      .tmp-title {
        font-size: 10px;
      }

      .device-arrow {
        position: absolute;
        right: -15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        color: #4D5262;
      }
    }
  }

  .house-row {
    display: flex;
    padding-top: 13px;
  }

  .house-col {
    //flex: 1;
    width: 25%;
    text-align: center;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    color: #C4C4C4;

    p {
      display: block;

      &:nth-child(2) {
        font-family: Montserrat;
        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        padding: 5px 0;
        line-height: 24px;
        text-align: center;
        color: #1B144E;
      }
    }
  }

  .scene-popup-body {
    display: flex;
    flex-direction: column;
    margin-left: 36px;
    margin-top: 20px;
    margin-right: 10px;

    &.air-popup-body {
      flex-direction: row;
      margin: 0;
      justify-content: center;
    }

    .body-item {
      padding-top: 10px;
      font-style: normal;
      font-weight: 500;
      font-size: 14px;
      line-height: 21px;
      color: #c4c4c4;

      .text-status {
        width: 16px;
        height: 16px;
        background: #f0da21;
        border-radius: 100%;
        display: inline-block;
        margin-right: 16px;

        &.grey {
          background: #f3f3f3;
        }
      }

    }
  }

  .dialog-width {
    width: 280px !important;
  }

  .air-dialog-content {
    position: relative;
    width: 100%;
    height: 360px;


    .dialog-top {
      position: relative;
      height: 70px;
      background: #F3F3F3;

      .img-yellow {
        background: #FFE823;
      }


      img {
        box-sizing: border-box;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        width: 70px;
        height: 70px;
        padding: 17px;
        transform: translateX(-50%);
        top: 15px;
      }

    }

    .secen-title {
      display: block;
      text-align: center;
      font-family: Black Han Sans;
      font-style: normal;
      font-weight: normal;
      font-size: 17px;
      line-height: 21px;
      margin-top: 20px;
      padding-top: 14px;
      align-items: center;
      text-align: center;
    }
  }


  .dialog-btns {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    text-align: center;
    margin: 0 auto;
    width: 88px;
    height: 46px;
    line-height: 1;
    color: #4D5262;
    background: #FFFFFF;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 15px rgba(0, 0, 0, 0.15);
    border-radius: 25px;
    cursor: pointer;

    span {
      height: 46px;
      line-height: 46px;
      display: inline-block;
    }
  }


}
</style>
<style lang="scss">
.space-tip {
  width: 320px;
  //height: 120px;
  background: #FFFFFF;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 12px;

  .space-tip-close {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    text-align: right;

    img {
      width: 24px;
      height: 24px;
    }
  }

  .space-tip-title {
    padding-bottom: 10px;
    color: #000000;
    opacity: 0.9;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
  }

  .space-tip-box {
    font-style: normal;
    padding-bottom: 35px;
    font-weight: 400;
    font-size: 17px;
    line-height: 24px;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);

    span {
      display: inline-block;
      vertical-align: middle;
    }

    img {
      vertical-align: middle;
      margin-left: 3px;
      width: 21px;
      margin-right: 3px;
    }
  }
}
</style>
<style lang="scss">
.air-dialog-content {
  .van-button_text {
    color: $elActiveColor;
  }
}
</style>