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

<template>
  <div class="main" :style="{ 'background-image': 'url(' + roomInfo.bg + ')' }">
    <!-- <img :src="roomData[0].bg" class="video-image" /> -->
    <!-- <img class="video-image" src="roomInfo.bg"></div> -->
    <!-- <div class="video-image" :style="{ background: roomInfo.modeBg }"></div>
     -->
    <video
      class="video-image"
      :autoplay="true"
      :muted="true"
      :loop="true"
      :preload="true"
      :controls="false"
      :poster="roomInfo.bg"
      :src="roomInfo.video"
    ></video>
    <div class="video-model"></div>
    <div class="content">
      <div class="metting-info">
        <img class="logo" :src="roomInfo.logo" />
        <div class="name">{{ roomInfo.name }}</div>
        <div class="location">{{ roomInfo.location }}</div>
      </div>
      <div class="mode-box">
        <div class="item" :class="modeType == 1 ? 'active' : ''" @click="checkModel(1)">
          <img
            :src="
              parseImgUrl(
                'taiguv1/envmonitor',
                modeType == 1 ? 'active/meeting.svg' : 'meeting.svg'
              )
            "
            alt=""
          />
          <span>讨论</span>
        </div>
        <div class="item" :class="modeType == 2 ? 'active' : ''" @click="checkModel(2)">
          <img
            :src="
              parseImgUrl(
                'taiguv1/envmonitor',
                modeType == 2 ? 'active/projector.svg' : 'projector.svg'
              )
            "
            alt=""
          />
          <span>投影</span>
        </div>
        <div class="item" :class="modeType == 3 ? 'active' : ''" @click="checkModel(3)">
          <img
            :src="
              parseImgUrl(
                'taiguv1/envmonitor',
                modeType == 3 ? 'active/stop.svg' : 'stop.svg'
              )
            "
            alt=""
          />
          <span>散会</span>
        </div>
      </div>
      <div class="env-box">
        <img class="box-line" :src="boxLine" />
        <div class="env-info">
          <div class="item">
            <div class="title">温度</div>
            <div class="num-box">
              <span>26</span>
              <span>℃</span>
            </div>
          </div>
          <div class="item">
            <div class="title">CO2</div>
            <div class="num-box">
              <span>410</span>
              <span>优</span>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="env-info">
          <div class="item">
            <div class="title">湿度</div>
            <div class="num-box">
              <span>42</span>
              <span>%</span>
            </div>
          </div>
          <div class="item">
            <div class="title">TVOC</div>
            <div class="num-box">
              <span>0.5</span>
              <span>健康</span>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="env-info">
          <div class="item">
            <div class="title">PM 2.5</div>
            <div class="num-box">
              <span>17</span>
              <span>优</span>
            </div>
          </div>
          <div class="item">
            <div class="title">甲醛</div>
            <div class="num-box">
              <span>0.04</span>
              <span>健康</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fotter" :class="airStatus ? 'small' : 'fotter'">
      <div class="box">
        <Screen :modeType="modeType"></Screen>
      </div>

      <!--空调-->
      <div class="box">
        <Volumn></Volumn>
      </div>
      <div class="box">
        <Lamp @showMore="showMore"></Lamp>
      </div>
      <div class="box air-box">
        <Air @getStatus="getStatus"></Air>
      </div>
      <div class="box">
        <Curtain></Curtain>
      </div>
    </div>

    <van-popup
      v-model:show="isLightColorFlag"
      position="right"
      :close-on-click-overlay="true"
      class="taigu-popup"
      teleport="#app"
    >
      <div>
        <LightMore></LightMore>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
import { useRoute } from "vue-router";
import Air from "./components/Air/index.vue";
import Screen from "./components/Screen/index.vue";
import Volumn from "./components/Volumn/index.vue";
import Lamp from "./components/Lamp/index.vue";
import Curtain from "./components/Curtain/index.vue";
import LightMore from "./components/Lamp/LightMore.vue";

import { parseImgUrl } from "@/utils";
// import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue-video-play";

export default defineComponent({
  components: {
    Screen,
    Volumn,
    Lamp,
    Air,
    Curtain,
    LightMore,
    videoPlay,
  },

  setup() {
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      boxLine: require("@/assets/taiguv1/svg/box_line.png"),
      roomData: [
        {
          id: "room1",
          name: "ROOM EOS",
          modeBg:
            "linear-gradient(113.73deg, rgba(47, 36, 28, 0.4) 17.26%, rgba(47, 36, 28, 0.8) 55.71%)",
          bg:
            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room1.png",
          video:
            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video1.mov",
        },
        {
          id: "room2",
          name: "ROOM METIS",
          modeBg:
            "linear-gradient(113.73deg, rgba(37, 21, 8, 0.4) 17.26%, rgba(37, 21, 8, 0.8) 55.71%)",
          bg:
            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room2.png",
          video:
            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video2.mp4",
        },
        {
          id: "room3",
          name: "ROOM NAIAD",
          modeBg:
            "linear-gradient(113.73deg, rgba(8, 14, 37, 0.4) 17.26%, rgba(10, 15, 33, 0.9) 55.71%)",
          bg:
            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room3.png",
          video:
            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video3.mov",
        },
        {
          id: "room4",
          name: "ROOM HELIOS",
          modeBg:
            "linear-gradient(113.73deg, rgba(32, 5, 5, 0.4) 17.26%, rgba(28, 7, 7, 0.8) 55.71%)",
          bg:
            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room4.png",
          video:
            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video4.mp4",
        },
        {
          id: "room5",
          name: "ROOM GAIA",
          modeBg:
            "linear-gradient(113.73deg, rgba(21, 32, 26, 0.5) 17.26%, rgba(14, 30, 21, 0.8) 55.71%)",
          bg:
            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room5.png",
          video:
            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video5.mp4",
        },
        {
          id: "room6",
          name: "ROOM AURA",
          modeBg:
            "linear-gradient(113.73deg, rgba(4, 18, 32, 0.5) 17.26%, rgba(6, 18, 32, 0.8) 55.71%)",
          bg:
            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room6.png",
          video:
            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video6.mov",
        },
      ],
      roomInfo: "",
      modeType: 1,
      checkModel(type) {
        proxyData.modeType = type;
      },
      airStatus: false,
      getStatus(flag) {
        proxyData.airStatus = flag;
      },
      isLightColorFlag: false,
      lightData: [],

      showMore(lightData) {
        proxyData.isLightColorFlag = true;
      },
    });
    onBeforeUnmount(() => {});
    onMounted(() => {
      let route = useRoute();
      let roomId = route.query.id;
      proxyData.roomInfo = proxyData.roomData[0];
      proxyData.roomData.map((item) => {
        if (item.id == roomId) {
          proxyData.roomInfo = item;
        }
      });

      proxyData.roomInfo.logo = require("@/assets/taiguv1/svg/meting_icon.svg");
      proxyData.roomInfo.location = "3F";
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss">
.main {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // width: 900px;
  // height: 600px;
  background-size: 100% 100%;
  // mask-image: linear-gradient(
  //   113.73deg,
  //   rgba(47, 36, 28, 0.4) 17.26%,
  //   rgba(47, 36, 28, 0.8) 55.71%
  // );

  .video-image {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    // width: 1020px;
    // height: auto;
    // height: 100%;
    width: 110%;
    height: auto;
  }
  .video-model {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      113.73deg,
      rgba(47, 36, 28, 0.4) 17.26%,
      rgba(47, 36, 28, 0.8) 55.71%
    );
  }
  .content {
    position: relative;
  }
  .metting-info {
    padding-left: 40px;
    padding-top: 6vh;
    display: flex;
    align-items: center;
    .logo {
      width: 40px;
      height: 40px;
      margin-right: 9px;
    }
    .name {
      font-family: Jost;
      font-size: 40px;
      font-weight: 300;
      line-height: 57.8px;
      letter-spacing: 0.02em;
      color: #fff;
      text-align: left;
      margin-right: 8px;
    }
    .location {
      //styleName: En/H3;
      font-family: Jost;
      font-size: 20px;
      font-weight: 300;
      line-height: 29px;
      color: #fff;
      margin-top: 15px;
    }
  }
  .env-box {
    position: absolute;
    box-sizing: border-box;
    width: 360px;
    // height: 268px;
    top: 6vh;
    // left: 550px;
    right: 50px;
    padding: 8px 56px;
    border-radius: 24px 160px 24px 24px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
    .box-line {
      position: absolute;
      top: -10px;
      left: -8px;
      width: 360px;
      height: 100%;
      // height: 268px;
    }
    .line {
      width: 244px;
      height: 1px;
      background: rgba(255, 255, 255, 0.2);
    }
    .env-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 0;
      // border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      .item {
        width: 120px;
        .title {
          //styleName: Chi/Body XS;
          font-family: PingFang SC;
          font-size: 11px;
          font-weight: 400;
          line-height: 15px;
          letter-spacing: 0.02em;
          padding-bottom: 5px;
          color: rgba(228, 228, 228, 1);
        }
        .num-box {
          span {
            //styleName: En/H1;
            display: inline-block;
            padding-right: 4px;
            color: #fff;
            &:nth-child(1) {
              font-family: Jost;
              font-size: 36px;
              font-weight: 300;
              line-height: 36px;
            }
            &:nth-child(2) {
              font-family: Jost;
              font-size: 12px;
              font-weight: 400;
              // line-height: 17px;
            }
          }
        }
      }
    }
  }
  .mode-box {
    margin-left: 40px;
    margin-top: 32vh;
    display: flex;
    align-items: center;
    .item {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      width: 77px;
      height: 40px;
      padding: 8px 12px 8px 12px;
      border-radius: 60px;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(20px);
      margin-right: 4px;
      img {
        widows: 24px;
        height: 24px;
        margin-right: 4px;
      }
      span {
        //styleName: Chi/Body Small;
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 0.02em;
        color: rgba(255, 255, 255, 0.6);
      }
    }
    .active {
      background: rgba(255, 255, 255, 0.8);
      span {
        color: rgba(0, 20, 40, 1);
      }
    }
  }
  .fotter {
    position: fixed;
    box-sizing: border-box;
    padding: 16px;
    // height: 264px;
    left: 0;
    bottom: 0;
    width: 100%;
    // overflow-x: scroll;
    border-radius: 24px;
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    .box {
      display: inline-block;
      vertical-align: middle;
      // margin-right: 8px;
      width: 176px;
      // height: 232px;
      height: 38.7vh;
      max-height: 232px;
      // box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
      // backdrop-filter: blur(40px);
    }
  }
  .small {
    .box {
      width: 165px;
    }
    .air-box {
      width: 220px;
    }
  }
}
.taigu-popup {
  box-sizing: border-box;
  width: 480px;
  // height: 600px;
  height: 100%;
  border-radius: 24px 0px 0px 24px;
  backdrop-filter: blur(30px);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(30px);
  padding: 40px 90px;
}
</style>