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

<template>
  <div class="main">
    <div class="main-left">
      <div class="left-top">
        <img :src="parseImgUrl('ipdImages', 'shanggeyun_logo.svg')" />
        <div class="left-time">
          <span>2022.06.01 </span>
          <span>10:10周一</span>
        </div>
        <div class="weather">
          {{ outWeather.temperature ? outWeather.temperature : "--" }}℃
        </div>
        <div class="weixiin">
          <img :src="parseImgUrl('ipdImages', 'weixin.svg')" />
          <span> 联系客户</span>
        </div>
      </div>
      <div class="left-space">
        <div class="text">
          <div
            @touchstart="gtouchstart"
            @touchmove="gtouchmove()"
            @touchend="showDeleteButton"
          >
            {{ officeData.localName }}
          </div>
          <div>
            <img :src="parseImgUrl('ipdImages', 'vector.svg')" />
            <span>无人</span>
          </div>
        </div>
        <div class="space-info">
          <div class="space-temp">
            <img :src="parseImgUrl('ipdImages', 'template-icon.svg')" alt="" />
            <span class="temp-text">温度</span>
            <span class="temp-num"
              >{{ officeData.temperature }}<sup>℃</sup></span
            >
          </div>
        </div>
        <div class="space-env">
          <div
            class="env-item"
            :style="[
              { background: item.bgColor ? item.bgColor : '' },
              { opacity: item.bgColor ? 0.8 : '' },
              { borderRadius: item.bgColor ? '25px' : '' },
            ]"
            :class="index == 1 ? 'env-color' : ''"
            :key="'env' + index"
            @click="handleDetail(item)"
            v-for="(item, index) in envlist"
          >
            <div>
              <img :src="parseImgUrl('ipdImages', item.img)" alt="" />
              <span>{{ item.name }}</span>
            </div>
            <div class="env-text">
              {{ item.num }} <sup>{{ item.unit }}</sup>
            </div>
          </div>
        </div>
      </div>
      <div class="fotter">
        <template v-for="(item, index) in spaceData">
          <div
            class="fotter-item"
            :class="item.active ? 'fotter-item-active' : ''"
            :key="index + 'nav'"
            v-if="index < 3"
            @click="chacgeSpace(item)"
          >
            <img
              v-if="item.active"
              :src="parseImgUrl('ipdImages', 'rectangle-active.svg')"
            />
            <img :src="parseImgUrl('ipdImages', 'rectangle1.svg')" v-else />

            <span>{{ item.spaceName }} </span>
          </div>
        </template>
        <div class="fotter-item-end" v-if="spaceData && spaceData.length > 3">
          <img :src="parseImgUrl('ipdImages', 'rectangle-fotter.svg')" />
          <span>…</span>
        </div>
      </div>
    </div>
    <div class="main-right">
      <!--加班start-->
      <div class="work-btn">
        <!-- {{roomType}} -->
        <work-config
          v-if="roomType === '开放' && isWork"
          :scenarioArr="scenarioArr"
          :workkArr="workkArr"
          @triggerWork="triggerWork"
        ></work-config>
        <scenario-config
          v-if="roomType === '会议室' && scenarioArr && scenarioArr.length"
          :activeType="activeType"
          :scenarioArr="scenarioArr"
          :spaceId="spaceInfo.spaceId"
          :projectId="projectId"
          @setHeadScene="setHeadScene"
        ></scenario-config>
      </div>
      <!--加班end-->
      <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>
    <van-popup
      v-model:show="isShowWork"
      position="right"
      class="popup-content"
      teleport="#app"
    >
      <work-overtime
        v-if="isShowWork"
        :projectId="projectId"
        :workkArr="workkArr"
      ></work-overtime>
    </van-popup>
    <van-popup
      v-model:show="isShowMetting"
      position="right"
      :close-on-click-overlay="false"
      class="popup-content"
      teleport="#app"
    >
      <scenario-dailog
        :secenaroStatus="secenaroStatus"
        @closeDailog="closeDailog"
      >
      </scenario-dailog>
    </van-popup>
    <van-popup
      v-model:show="isShowDetail"
      position="right"
      :close-on-click-overlay="true"
      class="popup-content"
      teleport="#app"
    >
      <detail :query="detailQuery" v-if="isShowDetail"></detail>
    </van-popup>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  onBeforeMount,
  onMounted,
  nextTick,
  onBeforeUnmount,
} from "vue";
import WorkOvertime from "./components/workOvertime/index.vue";
import WorkConfig from "./components/workOvertime/WorkConfig.vue";
import ScenarioConfig from "./components/Scenario/ScenarioConfig.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 ScenarioDailog from "@/views/envmonitor/components/Scenario/scenarioDailog.vue";
import Detail from "@/views/envmonitor/detail.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,
  querySpaceSceneConfig,
  queryCustomAndScence,
  queryWorkSpace,
} from "@/apis/envmonitor";
import Keys from "@/constant/key";
import {
  formatDate,
  getHours,
  getLocalNewSpaceInfo,
  getUserInfo,
  parseImgUrl,
  setQueryConfig,
} from "@/utils";
import { store } from "@/store";
import { SpaceInfoModel } from "@/model/userModel";
import { getWorkType } from "@/utils/mapIcon";

export default defineComponent({
  components: {
    MapBox,
    ScenarioDailog,
    Scenario,
    Header,
    Comheader,
    NavBar,
    Air,
    Light,
    Curtain,
    TimeBox,
    WorkOvertime,
    WorkConfig,
    ScenarioConfig,
    Detail,
    [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 = {};
    let secenaroStatus: any = {};
    // 空间数据（包括空间下的设备的状态）
    const officeData: any = {};
    let spaceEqFlagObj: SpaceInfoModel = {
      hasAir: true, // 有无空调
      hasBlowing: false, // 空调有无 变风量系统
      hasLamp: false, //有无灯具
    };
    const popList: any = [];
    const detailQuery: any = {};
    // 空间类型
    let spaceInfo: any = {};
    const projectId: string = store.state.user.projectId;
    const sceneDetail: any = {};
    const timeOutEvent: 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: 2,
        name: "甲醛",
        num: "",
        level: "",
        bgColor: "",
        img: "jiaquan.svg",
        funcid: "HCHO",
        code: "jiaquan",
        unit: "mg/㎡",
      },
      {
        id: 0,
        name: "CO₂",
        bgColor: "",
        num: "",
        level: "",
        img: "co2.svg",
        funcid: "CO2",
        code: "co2",
        unit: "ppm",
      },
      {
        id: 1,
        name: "PM2.5",
        bgColor: "",
        num: "",
        level: "",
        funcid: "PM2d5",
        img: "pm2.5.svg",
        code: "pm25",
        unit: "ug/m³",
      },
      {
        id: 3,
        name: "湿度",
        bgColor: "",
        img: "humidity.svg",
        num: "",
        level: "",
        funcid: "Tdb,RH",
        code: "shidu",
        unit: "%",
      },
    ];
    let scenarioArr: any = [];
    let realEevList: any = []; // 解决v-if报错的问题临时使用
    let workkArr: any = [];
    let spaceData: any = [];
    let secenTimer: any = {};
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      isShowWork: false,
      isShowMetting: false,
      localName: "",
      airTemp: "",
      userIsControl: true,
      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, // 当天服务定制-开始时间
      /**
       * 加班
       */
      triggerWork() {
        proxyData.isShowWork = true;
      },
      /**
       * 修改空间id
       * @param spaceId
       */
      changeSpaceId(spaceId: any) {
        proxyData.loadingStart();
        proxyData.spaceInfo.spaceId = spaceId;
        proxyData.headerInfo.headScene = "";
        // 切换空间的时候先清除定时器
        proxyData.clearTimerSpaceInfo();
        // proxyData.init();
        // 判断用户是否有可控制权限
        proxyData.checkUserSpace();
      },
      // 获取公司信息
      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(1) * 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();
          });
      },
      // 设置环境参数的背景颜色
      setEnvBg(key: any, text: any) {
        let bgColor: any = "";
        if (key === "humidity") {
          // 湿度
          if (text === "干燥" || text === "潮湿") {
            bgColor =
              "linear-gradient(180deg, rgba(205, 11, 0, 0) 0%, #CD0B00 100%)";
          } else {
            bgColor = "";
          }
        } else if (key === "hcho") {
          // 甲醛
          if (text === "超标") {
            bgColor =
              "linear-gradient(180deg, rgba(205, 11, 0, 0) 0%, #CD0B00 100%)";
          } else {
            bgColor = "";
          }
        } else if (key === "co2") {
          if (text === "略高") {
            bgColor =
              "linear-gradient(180deg, rgba(205, 11, 0, 0.5) 0%, #CD0B00 100%)";
          } else if (text === "超标") {
            bgColor =
              "linear-gradient(180deg, rgba(205, 11, 0, 1) 0%, #CD0B00 100%)";
          } else {
            bgColor = "";
          }
        } else if (key === "pm25") {
          if (text === "良") {
            bgColor =
              "linear-gradient(180deg, rgba(205, 11, 0, 0.2) 0%, #CD0B00 100%)";
          } else if (text === "轻度污染") {
            bgColor =
              "linear-gradient(180deg, rgba(205, 11, 0, 0.4) 0%, #CD0B00 100%)";
          } else if (text === "中度污染") {
            bgColor =
              "linear-gradient(180deg, rgba(205, 11, 0, 0.6) 0%, #CD0B00 100%)";
          } else if (text === "重度污染") {
            bgColor =
              "linear-gradient(180deg, rgba(205, 11, 0, 0.8) 0%, #CD0B00 100%)";
          } else if (text === "严重污染") {
            bgColor =
              "linear-gradient(180deg, rgba(205, 11, 0, 1) 0%, #CD0B00 100%)";
          } else {
            bgColor = "";
          }
        }
        return bgColor;
      },
      // 格式化环境数据(处理环境数据展示的级别)
      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];
        let bgColor: any = proxyData.setEnvBg(name, levelTxt);
        return {
          level,
          levelTxt,
          bgColor,
        };
      },
      /**
       *设置当前页面的高度
       */
      setPageheight() {
        nextTick(() => {
          document.getElementById("envBox").style.height =
            document.getElementById("envBox").offsetHeight + "px";
        });
      },
      // 空间信息数据格式化
      formatSpaceInfo(content: any = []) {
        for (let i = 0; i < content.length; i++) {
          let item = content[i];
          if (item.co2 || item.co2 == 0) {
            let obj: any = proxyData.checkLevel(item.co2, "co2");
            proxyData.envlist[1].level = obj.levelTxt;
            proxyData.envlist[1].bgColor = obj.bgColor;
            proxyData.envlist[1].num = item.co2;
          } else {
            proxyData.envlist[1].level = "--";
            proxyData.envlist[1].num = "--";
            proxyData.envlist[1].bgColor = "";
          }
          if (item.pm25 || item.pm25 === 0) {
            let obj: any = proxyData.checkLevel(item.pm25, "pm25");
            proxyData.envlist[2].level = obj.levelTxt;
            proxyData.envlist[2].bgColor = obj.bgColor;
            proxyData.envlist[2].num = item.pm25;
          } else {
            proxyData.envlist[2].level = "--";
            proxyData.envlist[2].num = "--";
            proxyData.envlist[2].bgColor = "";
          }
          if (item.hcho || item.hcho == 0) {
            let obj: any = proxyData.checkLevel(item.hcho, "hcho");
            proxyData.envlist[0].level = obj.levelTxt;
            proxyData.envlist[0].bgColor = obj.bgColor;
            proxyData.envlist[0].num = item.hcho.toFixed(2);
          } else {
            proxyData.envlist[0].level = "--";
            proxyData.envlist[0].num = "--";
            proxyData.envlist[0].bgColor = "";
          }
          if (item.humidity || item.humidity == 0) {
            let obj: any = proxyData.checkLevel(item.humidity, "humidity");
            proxyData.envlist[3].level = obj.levelTxt;
            proxyData.envlist[3].bgColor = obj.bgColor;
            proxyData.envlist[3].num = item.humidity.toFixed(0);
          } else {
            proxyData.envlist[3].level = "--";
            proxyData.envlist[3].num = "--";
            proxyData.envlist[3].bgColor = "";
          }
        }
      },
      activeType: "", // 当前会议室场景
      // 获取会议室场景（如果是会议室的才调此接口）
      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";
            }
            proxyData.activeType = resSen;
            // 定时调空间数据
            proxyData.timerSpaceInfo();
          })
          .catch(() => {
            proxyData.timerSpaceInfo();
          });
      },
      // 切换场景的状态
      secenaroStatus: secenaroStatus,
      // 设置场景名称
      setHeadScene(item: any) {
        proxyData.isShowMetting = true;
        proxyData.secenaroStatus = {
          localName: proxyData.officeData.localName,
          loading: item.loading,
          lodingText: item.lodingText,
          sceneName: item.sceneName,
        };
        console.log(proxyData.secenaroStatus);
      },
      closeDailog() {
        proxyData.isShowMetting = false;
      },
      isShowDetail: false,
      detailQuery: detailQuery,
      handleDetail(item: any) {
        proxyData.isShowDetail = true;
        proxyData.detailQuery.funcid = item.funcid;
        proxyData.detailQuery.spaceId = proxyData.spaceInfo.spaceId;
        // router.push({
        //   path: '/envmonitor-detail',
        //   query: {
        //     funcid: item.funcid,
        //     spaceId: proxyData.spaceInfo.spaceId
        //   }
        // })
      },
      // 获取空调设备温度
      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("您没有当前空间的控制权限！");
        }
      },
      // 切换空间
      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;
      },
      /**
       * 加载loading
       */
      loadingStart() {
        Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: "加载中...",
        });
      },
      /**
       * 结束
       */
      loadinngEnd() {
        Toast.clear();
      },
      // 清除定时器
      clearTimerSpaceInfo() {
        if (proxyData.spaceTimer) {
          clearTimeout(proxyData.spaceTimer);
          proxyData.spaceTimer = null;
        }
      },

      // 定时调空间
      timerSpaceInfo() {
        proxyData.clearTimerSpaceInfo();
        proxyData.spaceTimer = setTimeout(() => {
          proxyData.getSpaceInfo();
        }, 2000);
      },
      isWork: false,
      isMetting: false,
      // 判断对应的办公室的场景展示
      checkIsSpaceScene() {
        proxyData.scenarioArr.map((item: any) => {
          if (item.sceneType === "OVERTIME") {
            proxyData.isWork = true;
          }
          // if (item.sceneType === "DISCUSSING" || item.) {
          //   proxyData.isMetting = true;
          // }
        });
      },
      /**
       * 获取场景列表
       */
      scenarioArr: scenarioArr,
      querySpaceSceneConfig() {
        let params: any = {
          spaceId: proxyData.spaceInfo.spaceId,
        };
        let str: any = setQueryConfig(params);
        querySpaceSceneConfig(str).then((res) => {
          let resData: any = res;
          let data: any = resData?.data ?? [];
          proxyData.scenarioArr = data;
          proxyData.checkIsSpaceScene();
        });
      },
      /**
       *查询空间加班记录
       */
      workkArr: workkArr,
      secenTimer: secenTimer,
      queryCustomAndScenceTimer(timer: any = 5000) {
        if (proxyData.secenTimer) {
          clearTimeout(proxyData.secenTimer);
          proxyData.secenTimer = null;
        }
        proxyData.secenTimer = setTimeout(() => {
          proxyData.queryCustomAndScence();
        }, timer);
      },
      queryCustomAndScence() {
        let params: any = {
          spaceId: proxyData.spaceInfo.spaceId,
        };
        let str: any = setQueryConfig(params);
        queryCustomAndScence(str).then((res) => {
          let resData: any = res?.data ?? [];
          proxyData.workkArr = resData;
          proxyData.queryCustomAndScenceTimer(5000);
        });
      },
      // 格式化当前页面展示的时间
      formateWorkTime() {},
      /**
       * 空间相关的接口
       */
      init() {
        proxyData.getSpaceInfo();
        // 获取场景配置
        proxyData.querySpaceSceneConfig();
        // 查询加班记录
        proxyData.queryCustomAndScenceTimer(0);
        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);
      },
      // 平板当前空间
      spaceData: spaceData,
      queryWorkSpace() {
        let params: any = {
          criteria: {
            //类型：Object  必有字段  备注：无
            macAddress: "test", //类型：String  必有字段  备注：mac地址
          },
        };
        queryWorkSpace(params).then((res) => {
          let resData: any = res;
          if (resData.result === "success") {
            proxyData.spaceData = resData?.content ?? [];
          } else {
            proxyData.spaceData = [];
          }
          proxyData.spaceData.map((item: any) => {
            if (item.isMajorSpace) {
              item.active = true;
            } else {
              item.active = false;
            }
          });
        });
      },
      // 重置空间状态
      resetSpaceStatus() {
        proxyData.spaceData.map((item: any) => {
          item.active = false;
        });
      },
      // 切换空间
      chacgeSpace(item: any) {
        proxyData.resetSpaceStatus();
        proxyData.spaceInfo = item;
        proxyData.init();
        item.active = true;
      },
      timeOutEvent: timeOutEvent,
      gtouchstart() {
        proxyData.timeOutEvent = setTimeout(function () {
          proxyData.longPress();
        }, 500); //这里设置定时器，定义长按500毫秒触发长按事件
        return false;
      },
      //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
      showDeleteButton() {
        clearTimeout(proxyData.timeOutEvent); //清除定时器
        if (proxyData.timeOutEvent != 0) {
        }
        return false;
      },
      //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
      gtouchmove() {
        clearTimeout(this.timeOutEvent); //清除定时器
        proxyData.timeOutEvent = 0;
      },
      //真正长按后应该执行的内容
      longPress() {
        proxyData.timeOutEvent = 0;
        //执行长按要执行的内容，如弹出菜单
        // console.log("长按");
        router.push({
          name: "choiceSpace",
          query: { id: proxyData.projectId },
        });
      },
    });
    nextTick(() => {
      // proxyData.envmonitorMove()
      // proxyData.envScrollTop()
    });
    onBeforeUnmount(() => {
      if (proxyData.spaceTimer) {
        clearTimeout(proxyData.spaceTimer);
        proxyData.spaceTimer = null;
      }
    });
    onMounted(() => {
      // 获取天气信息
      // console.log("router====")
      // console.log(route.query)
      let spaceId: any = route.query.spaceId;
      proxyData.spaceInfo = {
        // spaceId: "Sp1101080259ce19c0effb604fe380f3a00c37e3959e",
        spaceId: spaceId,
      };
      proxyData.getWeather();
      proxyData.init();
      // 获取当前平板绑定的空间
      proxyData.queryWorkSpace();
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.main {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 3.33vh 20px 0 20px;
  font-size: 0;
  background: linear-gradient(0deg, rgba(69, 33, 0, 0.2), rgba(69, 33, 0, 0.2)),
    url($bg) no-repeat;
  background-size: 100% 100%;

  .main-left {
    // padding-left: 20px;
    display: inline-block;
    //width: 54%;

    .left-top {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      img {
        display: inline-block;
        vertical-align: middle;
        width: 60px;
        height: 20px;
        margin-right: 5px;
      }
      div {
        vertical-align: middle;
        display: inline-block;
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #ffffff;
        span {
          display: inline-block;
          vertical-align: middle;
          &:nth-child(1) {
            padding: 10px;
          }
        }
      }
      .weather {
        padding-left: 22px;
      }
      .weixiin {
        margin-left: 10px;
        img {
          width: 24px;
          height: 24px;
        }
      }
    }

    .left-space {
      padding-top: 20.6vh;
      padding-right: 80px;
      .text {
        position: relative;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        div {
          display: inline-block;
          vertical-align: middle;
          &:nth-child(1) {
            font-style: normal;
            font-weight: 500;
            font-size: 40px;
            line-height: 58px;
            color: #ffffff;
          }
          &:nth-child(2) {
            position: absolute;
            bottom: 12px;
            width: 55px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            margin-left: 10px;
            background: #edf1f5;
            border-radius: 10px;
            img {
              display: inline-block;
              vertical-align: middle;
              width: 12px;
              height: 12px;
              // margin-top: 4px;
            }
            span {
              display: inline-block;
              vertical-align: middle;
              margin-left: 4px;
              font-weight: 400;
              font-size: 12px;
              line-height: 15px;
              color: #8b949e;
            }
          }
        }
      }
    }
    .space-info {
      // padding-top: 48px;
      padding-top: 6vh;
      .space-temp {
        padding-bottom: 13px;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.4);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        img {
          display: inline-block;
          vertical-align: middle;
          width: 22px;
          height: 40px;
        }
        span {
          display: inline-block;
          vertical-align: middle;
          padding-left: 14px;
        }
        .temp-text {
          font-family: "Noto Sans SC";
          font-style: normal;
          font-weight: 500;
          font-size: 32px;
          line-height: 46px;
          text-align: center;
          color: #ffffff;
          padding-left: 13px;
        }
        .temp-num {
          position: relative;
          padding-left: 24px;
          font-family: "Montserrat";
          font-style: normal;
          font-weight: 400;
          font-size: 60px;
          line-height: 73px;
          color: #ffffff;
          sup {
            position: absolute;
            top: 0;
            font-family: "Noto Sans SC";
            font-style: normal;
            font-weight: 500;
            font-size: 13px;
            line-height: 19px;
            color: #ffffff;
          }
        }
      }
    }
    .space-env {
      display: flex;
      // padding-top: 20px;
      padding-top: 5vh;
      justify-content: space-between;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      .env-item {
        padding-top: 8px;
        height: 88px;
        &:nth-child(1) {
          text-align: left;
          width: 129px;
        }
        &:nth-child(2) {
          // text-align: center;
          padding-left: 20px;
          width: 129px;
        }
        &:nth-child(3) {
          // text-align: center;
          padding-left: 20px;
          width: 117px;
        }
        &:nth-child(4) {
          // text-align: center;
          padding-left: 20px;
          width: 97px;
        }
        div {
          img {
            display: inline-block;
            vertical-align: middle;
            width: 20px;
            height: 20px;
            margin-right: 5px;
          }
          span {
            display: inline-block;
            vertical-align: middle;
            font-size: 16px;
            line-height: 23px;
            text-align: center;
            color: #ffffff;
          }
          &:nth-child(2) {
            padding-top: 10px;
            font-family: "Montserrat";
            font-style: normal;
            font-weight: 400;
            font-size: 32px;
            line-height: 39px;
            color: #ffffff;
            sup {
              font-family: "Noto Sans SC";
              font-style: normal;
              font-weight: 500;
              font-size: 13px;
              line-height: 19px;
            }
          }
        }
        .env-text {
          position: relative;
          width: 100%;
          // text-align: left;
          sup {
            position: absolute;
            // right: -5px;
            top: 10px;
          }
        }
      }
      .env-color {
        // background: linear-gradient(
        //   180deg,
        //   rgba(205, 11, 0, 0) 0%,
        //   #cd0b00 100%
        // );
        // opacity: 0.8;
        // border-radius: 25px;
      }
    }
  }

  .main-right {
    //width: 45%;
    // width: 330px;
    display: inline-block;

    .work-btn {
      width: 100%;
      height: 98px;
      font-size: 14px;
      text-align: left;
    }
  }

  .fotter {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 666;
    .fotter-item {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 195px;
      height: 40px;
      img {
        width: 100%;
      }
      &:nth-child(1) {
        left: 0;
        z-index: 333;
      }
      &:nth-child(2) {
        margin-left: -18px;
        z-index: 222;
      }
      &:nth-child(3) {
        margin-left: -25px;
        z-index: 111;
      }
      span {
        position: absolute;
        display: inline-block;
        width: 128px;
        height: 18px;
        left: 50%;
        top: 50%;
        transform: translateY(-40%) translateX(-50%);
        font-family: "Noto Sans SC";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 18px;
        text-align: center;
        color: #c3c7cb;
        word-wrap: break-word; /*强制换行*/
        overflow: hidden; /*超出隐藏*/
        text-overflow: ellipsis; /*隐藏后添加省略号*/
        white-space: nowrap; /*强制不换行*/
      }
    }
    .fotter-item-end {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 93px;
      height: 40px;
      margin-left: -30px;
      text-align: center;
      z-index: 1;
      img {
        width: 100%;
      }
      span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-family: "Noto Sans SC";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        text-align: center;
        color: #c3c7cb;
      }
    }
    .fotter-item-active {
      margin-bottom: -2px;
      span {
        color: #1f2429;
      }
    }
  }
}
</style>