Explorar o código

feat: 窗帘

anxiaoxia hai 2 meses
pai
achega
de869c1d7d

+ 209 - 184
src/views/envmonitor/taiguv1/components/Curtain/CurtainMore.vue

@@ -1,212 +1,237 @@
 <template>
-  <div class="more-box">
-    <div class="light-more-top">
-      <div class="left">
-        <div class="light-box">
-          <img :src="parseImgUrl('taiguv1/envmonitor', 'active/lamp.svg')" alt="" />
+    <div class="more-box">
+        <div class="light-more-top">
+            <div class="left">
+                <div class="light-box">
+                    <img
+                        :src="curtainIcon"
+                        alt=""
+                    />
+                </div>
+            </div>
+            <div class="right">
+                <div
+                    class="control_all"
+                    @click="handle('all',1,'开启中')"
+                >全开</div>
+                <div
+                    class="control_all"
+                    @click="handle('all',0,'关闭中')"
+                >全关</div>
+            </div>
+        </div>
+        <div class="control_status">{{ controlStatus ? controlStatus : '' }}</div>
+        <div class="light-bottom">
+            <div
+                class="item-box"
+                v-for="(item, index) in childCurtains"
+            >
+                <div class="name">{{ item.name }}</div>
+                <div class="control-box">
+                    <div class="control"  @click="handle('child',1,'开启中')">上</div>
+                    <div class="control"  @click="handle('child',2,'暂停中')">停</div>
+                    <div class="control"  @click="handle('child',0,'关闭中')">下</div>
+                </div>
+            </div>
         </div>
-        <div class="light-name">窗帘</div>
-      </div>
-      <div class="right">
-        <div class="control">全开</div>
-        <div class="control">全关</div>
-      </div>
-    </div>
-    <div class="light-bottom">
-      <div
-        class="item-box"
-        :class="item.isOpen ? 'light-box-active ' : ''"
-        v-for="(item, index) in childLights"
-      >
-        <div class="name">{{ item.name }}</div>
-        <Switch
-          class="switch-btn"
-          inactive-color="rgba(0, 0, 0, 0.08)"
-          v-model="item.isOpen"
-        />
-      </div>
     </div>
-  </div>
 </template>
 
-<script lang="ts">
-import {
-  defineComponent,
-  onMounted,
-  reactive,
-  toRefs,
-  computed,
-  watch,
-  onUnmounted,
-  onBeforeMount,
-  onBeforeUnmount,
-} from "vue";
-import { Switch, Dialog, Loading, Toast } from "vant";
-import { parseImgUrl } from "@/utils";
-import any = jasmine.any;
+<script setup>
+import curtainIcon from '@/assets/taiguv1/svg/curtain_icon.svg';
+import { ref } from "vue";
+// const isOpen = ref(false)
+const childCurtains = ref([
+    {
+        name: "内侧窗帘",
+        isOpen: false,
+        id: 1
+    },
+    {
+        name: "外侧窗帘",
+        isOpen: false,
+        id: 2
+    },
+])
+const controlStatus = ref('')
+let timer = null // 添加timer变量
+
+const handle = (type, status, name) => {
+    controlStatus.value = name;
+    // 清除之前的定时器
+    if (timer) {
+        clearTimeout(timer);
+    }
+    // 设置新的定时器并保存引用
+    timer = setTimeout(() => {
+        controlStatus.value = '';
+    }, 3000);
+    if (type === 'all') {
+        childCurtains.value.forEach((item) => {
+            // item = item.id;
+        })
+    } else {
+        
+    }
 
-export default defineComponent({
-  components: {
-    Switch,
-    [Dialog.Component.name]: Dialog.Component,
-    Loading,
-  },
-  setup(props, contx) {
-    const proxyData = reactive({
-      parseImgUrl: parseImgUrl,
-      isOpen: false,
-      childLights: [
-        {
-          name: "主灯",
-          isOpen: false,
-        },
-        {
-          name: "氛围灯",
-          isOpen: false,
-        },
-        {
-          name: "吸顶灯",
-          isOpen: false,
-        },
-        {
-          name: "吊灯",
-          isOpen: false,
-        },
-        {
-          name: "壁灯",
-          isOpen: false,
-        },
-      ],
-    });
-    onBeforeUnmount(() => {});
-    onMounted(() => {});
+};
 
-    return {
-      ...toRefs(proxyData),
-    };
-  },
-});
 </script>
 <style lang="scss" scoped>
 .more-box {
-  .light-more-top {
-    display: flex;
-    align-items: center;
-    .left {
-      margin-right: 36px;
-      .light-box {
-        width: 110px;
-        height: 110px;
-        background: rgba(255, 255, 255, 0.4);
-        border-radius: 50%;
-        text-align: center;
-        margin-right: 27px;
-        img {
-          width: 36px;
-          height: 36px;
-          margin: 0 auto;
-          margin-top: 37px;
+    .light-more-top {
+        display: flex;
+        align-items: center;
+        .left {
+            margin-right: 36px;
+            .light-box {
+                width: 110px;
+                height: 110px;
+                background: rgba(255, 255, 255, 0.4);
+                border-radius: 50%;
+                text-align: center;
+                margin-right: 27px;
+                img {
+                    width: 36px;
+                    height: 36px;
+                    margin: 0 auto;
+                    margin-top: 37px;
+                }
+            }
+        }
+        .right {
+            height: 92px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            .control_all {
+                display: flex;
+                width: 100px;
+                height: 40px;
+                padding: 8px 12px;
+                justify-content: center;
+                align-items: center;
+                gap: 12px;
+                border-radius: 50px;
+                background: #dedfde;
+                box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
+                backdrop-filter: blur(10px);
+                color: #001428;
+                text-align: center;
+                font-family: "PingFang SC";
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 18px; /* 128.571% */
+                letter-spacing: 0.56px;
+            }
         }
-      }
-      .light-name {
-        //styleName: Chi/Body Large;
+    }
+    .control_status {
         margin-top: 12px;
-        font-family: PingFang SC;
         width: 110px;
+        height: 22px;
+        color: var(--Blue, #001428);
+        text-align: center;
+        /* Chi/Body Large */
+        font-family: "PingFang SC";
         font-size: 16px;
+        font-style: normal;
         font-weight: 300;
-        line-height: 22px;
-        letter-spacing: 0.02em;
-        text-align: center;
-        color: rgba(0, 20, 40, 1);
-      }
-    }
-    .right {
-      height: 92px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      .control {
-        width: 100px;
-        height: 40px;
-        line-height: 40px;
-        border-radius: 50px;
-        backdrop-filter: blur(20px);
-        background: rgba(255, 255, 255, 0.4);
-        box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
-        //styleName: Chi/Body Small;
-        font-family: PingFang SC;
-        font-size: 12px;
-        font-weight: 400;
-        letter-spacing: 0.04em;
-        text-align: center;
-      }
+        line-height: normal;
+        letter-spacing: 0.32px;
     }
-  }
-  .light-bottom {
-    margin-top: 36px;
-    .item-box {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 300px;
-      height: 68px;
-      box-sizing: border-box;
-      padding: 20px 24px;
-      border-radius: 24px 24px 44px 24px;
-      background: rgba(255, 255, 255, 0.2);
-      box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.05);
-      margin-bottom: 12px;
-      .name {
-        //styleName: Chi/Body Regular;
-        font-family: PingFang SC;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 19px;
-        letter-spacing: 0.02em;
-        color: rgba(0, 20, 40, 1);
-      }
+    .light-bottom {
+        margin-top: 36px;
+        .item-box {
+            display: flex;
+            width: 300px;
+            height: 84px;
+            padding: 20px 23px 24px 24px;
+            justify-content: space-between;
+            align-items: center;
+            /* card shadow */
+            box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.05);
+            border-radius: 24px 24px 44px 24px;
+            background: var(--White-60, rgba(255, 255, 255, 0.6));
+            margin-bottom: 12px;
+            .name {
+                //styleName: Chi/Body Regular;
+                color: var(--Blue, #001428);
+                font-family: "PingFang SC";
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: normal;
+                letter-spacing: 0.28px;
+            }
+            .control-box {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .control {
+                    display: flex;
+                    width: 40px;
+                    height: 40px;
+                    justify-content: center;
+                    align-items: center;
+                    margin-left: 10px;
+                    border-radius: 60px;
+                    background: rgba(255, 255, 255, 0.4);
+                    backdrop-filter: blur(30px);
+                    color: #000;
+                    font-family: Jost;
+                    font-size: 16px;
+                    font-style: normal;
+                    font-weight: 300;
+                    line-height: normal;
+                }
+            }
+        }
+        .light-box-active {
+            background: rgba(255, 255, 255, 0.6);
+        }
     }
-    .light-box-active {
-      background: rgba(255, 255, 255, 0.6);
+    .switch-btn {
+        margin-top: 0;
+        width: 50px !important;
+        height: 28px !important;
+        border: none;
     }
-  }
-  .switch-btn {
-    margin-top: 0;
-    width: 50px !important;
-    height: 28px !important;
-    border: none;
-  }
 }
 </style>
 <style lang="scss">
 .more-box {
-  .van-switch__node {
-    background: rgba(255, 255, 255, 0.6);
-    width: 24px;
-    height: 24px;
-    top: 0.33vh;
-  }
-  .van-switch--on {
-    background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%) !important;
     .van-switch__node {
-      background: #fff !important;
+        background: rgba(255, 255, 255, 0.6);
+        width: 24px;
+        height: 24px;
+        top: 0.33vh;
+    }
+    .van-switch--on {
+        background: linear-gradient(
+            95.5deg,
+            #99282b 21.44%,
+            #a95459 84.95%
+        ) !important;
+        .van-switch__node {
+            background: #fff !important;
+        }
+    }
+    .van-loading__spinner {
+        color: $elActiveColor !important;
     }
-  }
-  .van-loading__spinner {
-    color: $elActiveColor !important;
-  }
 
-  .van-switch__loading {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    line-height: 1;
-  }
+    .van-switch__loading {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        line-height: 1;
+    }
 
-  .van-switch--disabled {
-    opacity: 0.5;
-  }
+    .van-switch--disabled {
+        opacity: 0.5;
+    }
 }
 </style>

+ 71 - 53
src/views/envmonitor/taiguv1/components/Curtain/index.vue

@@ -7,69 +7,77 @@
         <div class="top">
             <img
                 :src="
-          parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/curtain.svg' : 'curtain.svg')
+          parseImgUrl('taiguv1/envmonitor/', isOpen ? 'active/curtain.svg' : 'curtain.svg')
         "
                 alt=""
             />
-            <div class="top-right">
-                <Switch
-                    class="switch-btn"
-                    inactive-color="rgba(0, 0, 0, 0.3)"
-                    v-model="isOpen"
-                    @click.stop=""
-                />
-            </div>
         </div>
         <div class="bottom">
             <div class="text">窗帘</div>
-            <div class="status">{{ isOpen ? "已开启" : "已关闭" }}</div>
+            <div class="status">{{ controlStatus }}</div>
             <div class="control-box">
-                <div class="control-item">上</div>
-                <div class="control-item">停</div>
-                <div class="control-item">下</div>
+                <div
+                    v-for="item in controlName"
+                    :key="item.value"
+                >
+                    <div
+                        class="control-item"
+                        :class="item.isActive ? 'active' : ''"
+                        @click.stop="handle(item.value, item.status)"
+                    >{{ item.name }}</div>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
-<script lang="ts">
-import {
-    defineComponent,
-    onMounted,
-    reactive,
-    toRefs,
-    computed,
-    watch,
-    onUnmounted,
-    onBeforeMount,
-    onBeforeUnmount,
-} from "vue";
-import { Switch, Dialog, Loading, Toast } from "vant";
+<script setup>
 import { parseImgUrl } from "@/utils";
-import any = jasmine.any;
+import { onBeforeUnmount, onMounted, ref } from "vue";
+const controlStatus = ref('')
+const controlName = ref([
+    { isActive: false, name: '上', value: 1, status: '开启中' },
+    { isActive: false, name: '停', value: 2, status: '暂停中' },
+    { isActive: false, name: '下', value: 0, status: '关闭中' },
+])
+const isOpen = ref(true)
+const isActive = ref(false)
+const emit = defineEmits(['showMore'])
+const searchMore = () => {
+    emit("showMore", 'curtain', true);
+}
+let timer = null // 添加timer变量
+let btnTimer = null;
+const handle = (value, status) => {
+    controlStatus.value = status;
+    if (btnTimer) {
+        clearTimeout(btnTimer);
+    }
+    controlName.value.forEach(item => {
+        if (item.value === value) {
+            item.isActive = true;
+            btnTimer = setTimeout(() => {
+                item.isActive = false;
+            }, 100);
+        } else {
+            item.isActive = false;
+        }
 
-export default defineComponent({
-    components: {
-        Switch,
-        [Dialog.Component.name]: Dialog.Component,
-        Loading,
-    },
-    setup(props, contx) {
-        const proxyData = reactive({
-            parseImgUrl: parseImgUrl,
-            isOpen: false,
-            searchMore() {
-            contx.emit("showMore",'curtain',true);
-      },
-        });
-        onBeforeUnmount(() => {});
-        onMounted(() => {});
 
-        return {
-            ...toRefs(proxyData),
-        };
-    },
-});
+    });
+
+    if (timer) {
+        clearTimeout(timer);
+    }
+    // 设置新的定时器并保存引用
+    timer = setTimeout(() => {
+        controlStatus.value = '';
+    }, 3000);
+
+}
+onBeforeUnmount(() => { });
+onMounted(() => { });
+
 </script>
 <style lang="scss" scoped>
 .volumn-box {
@@ -109,12 +117,15 @@ export default defineComponent({
         }
         .status {
             //styleName: Chi/Body XS;
-            font-family: PingFang SC;
+            height: 15px;
+            margin-bottom: 10px;
+            color: var(--Grey, #74808d);
+            font-family: "PingFang SC";
             font-size: 11px;
+            font-style: normal;
             font-weight: 400;
-            line-height: 15px;
-            letter-spacing: 0.02em;
-            color: rgba(255, 255, 255, 0.4);
+            line-height: normal;
+            letter-spacing: 0.22px;
         }
         .control-box {
             width: 100%;
@@ -128,14 +139,21 @@ export default defineComponent({
                 height: 36px;
                 border-radius: 60px;
                 opacity: 0.6;
-                background: var(--White-White-40, rgba(255, 255, 255, 0.40));
+                background: var(--White-White-40, rgba(255, 255, 255, 0.4));
                 backdrop-filter: blur(30px);
                 font-family: Jost;
                 font-size: 16px;
+                color: var(--Blue, #001428);
                 font-style: normal;
                 font-weight: 300;
                 line-height: normal;
             }
+            .control-item.active {
+                border-radius: 60px;
+                opacity: 1;
+                box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+                color: #000;
+            }
         }
     }
     .switch-btn {

+ 25 - 29
src/views/envmonitor/taiguv1/components/Lamp/index.vue

@@ -12,32 +12,28 @@
     <div class="bottom">
       <div class="text">光照</div>
       <div class="status">{{ isOpen ? "已开启" : "已关闭" }}</div>
-      <div class="right" @click="searchMore">
+      <!-- <div class="right" @click="searchMore">
         <img
           :src="
             parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/filter.svg' : 'filter.svg')
           "
           alt=""
         />
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
 
 <script lang="ts">
+import { parseImgUrl } from "@/utils";
+import { Dialog, Loading, Switch } from "vant";
 import {
-  defineComponent,
-  onMounted,
-  reactive,
-  toRefs,
-  computed,
-  watch,
-  onUnmounted,
-  onBeforeMount,
-  onBeforeUnmount,
+    defineComponent,
+    onBeforeUnmount,
+    onMounted,
+    reactive,
+    toRefs
 } from "vue";
-import { Switch, Dialog, Loading, Toast } from "vant";
-import { parseImgUrl } from "@/utils";
 import any = jasmine.any;
 
 export default defineComponent({
@@ -109,22 +105,22 @@ export default defineComponent({
       letter-spacing: 0.02em;
       color: rgba(255, 255, 255, 0.4);
     }
-    .right {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      width: 36px;
-      height: 36px;
-      background: rgba(255, 255, 255, 0.2);
-      backdrop-filter: blur(60px);
-      border-radius: 50%;
-      text-align: center;
-      img {
-        width: 20px;
-        height: 20px;
-        margin-top: 8px;
-      }
-    }
+    // .right {
+    //   position: absolute;
+    //   right: 0;
+    //   bottom: 0;
+    //   width: 36px;
+    //   height: 36px;
+    //   background: rgba(255, 255, 255, 0.2);
+    //   backdrop-filter: blur(60px);
+    //   border-radius: 50%;
+    //   text-align: center;
+    //   img {
+    //     width: 20px;
+    //     height: 20px;
+    //     margin-top: 8px;
+    //   }
+    // }
   }
   .switch-btn {
     margin-top: 0;

+ 101 - 0
src/views/envmonitor/taiguv1/const.js

@@ -0,0 +1,101 @@
+export const roomSourceData =[
+    {
+      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://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room1.png',
+      icon: require('@/assets/taiguv1/svg/meting_icon.svg'),
+      video:
+        'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video1.mov',
+        envParams: {
+            CO2: 1900,
+            TVOC: 200,
+            PM25: 10
+
+        }
+    },
+    {
+      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://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room2.png',
+      icon: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/room_metis.svg',
+      video:
+        'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video2.mp4',
+    },
+    {
+      id: 'room3',
+      name: 'ROOM NAIAD',
+      icon: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/room_naiad.svg',
+      modeBg:
+        'linear-gradient(113.73deg, rgba(8, 14, 37, 0.4) 17.26%, rgba(10, 15, 33, 0.9) 55.71%)',
+      bg: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room3.png',
+      video:
+        'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video3.mov',
+    },
+    {
+      id: 'room4',
+      name: 'ROOM HELIOS',
+      icon: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/room_helios.svg',
+      modeBg:
+        'linear-gradient(113.73deg, rgba(32, 5, 5, 0.4) 17.26%, rgba(28, 7, 7, 0.8) 55.71%)',
+      bg: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room4.png',
+      video:
+        'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video4.mp4',
+    },
+    {
+      id: 'room5',
+      name: 'ROOM GAIA',
+      icon: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/room_gaia.svg',
+      modeBg:
+        'linear-gradient(113.73deg, rgba(21, 32, 26, 0.5) 17.26%, rgba(14, 30, 21, 0.8) 55.71%)',
+      bg: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room5.png',
+      video:
+        'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video5.mp4',
+    },
+    {
+      id: 'room6',
+      name: 'ROOM AURA',
+      icon: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/room_aura.svg',
+      modeBg:
+        'linear-gradient(113.73deg, rgba(4, 18, 32, 0.5) 17.26%, rgba(6, 18, 32, 0.8) 55.71%)',
+      bg: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room6.png',
+      video:
+        'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video6.mov',
+    },
+  ]
+
+  export const lanageArr = [
+    {
+      type: 'zh',
+      text: '中',
+    },
+    {
+      type: 'en',
+      text: 'EN',
+    },
+  ]
+
+
+  export const ENV_CONFIG = {
+    CO2: {
+      min: 400,
+      max: 1200,
+      threshold: 800,
+      unit: 'ppm'
+    },
+    TVOC: {
+      min: 0,
+      max: 600,
+      threshold: 500,
+      unit: 'μg/m³'
+    },
+    'PM25': {
+      min: 0,
+      max: 75,
+      threshold: 25,
+      unit: 'μg/m³'
+    }
+  }

+ 100 - 141
src/views/envmonitor/taiguv1/index.vue

@@ -81,10 +81,10 @@
             </div>
           </div>
           <div class="item">
-            <div class="title">CO2</div>
+            <div class="title">CO</div>
             <div class="num-box">
-              <span>410</span>
-              <span></span>
+              <span>{{ envParams?.CO2?.value }}</span>
+              <span>{{ envParams?.CO2?.level }}</span>
             </div>
           </div>
         </div>
@@ -100,8 +100,8 @@
           <div class="item">
             <div class="title">TVOC</div>
             <div class="num-box">
-              <span>0.5</span>
-              <span>健康</span>
+              <span>{{ envParams?.TVOC?.value }}</span>
+              <span>{{ envParams?.TVOC?.level }}</span>
             </div>
           </div>
         </div>
@@ -110,17 +110,17 @@
           <div class="item">
             <div class="title">PM 2.5</div>
             <div class="num-box">
-              <span>17</span>
-              <span></span>
+              <span>{{ envParams?.PM25?.value }}</span>
+              <span>{{ envParams?.PM25?.level }}</span>
             </div>
           </div>
-          <div class="item">
+          <!-- <div class="item">
             <div class="title">甲醛</div>
             <div class="num-box">
               <span>0.04</span>
               <span>健康</span>
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
@@ -160,162 +160,121 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue'
+<script setup>
+import { parseImgUrl } from '@/utils'
+import { onBeforeUnmount, onMounted, ref } 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 CurtainMore from './components/Curtain/CurtainMore.vue'
 import Curtain from './components/Curtain/index.vue'
+import Lamp from './components/Lamp/index.vue'
 import LightMore from './components/Lamp/LightMore.vue'
-import CurtainMore from './components/Curtain/CurtainMore.vue'
+import Screen from './components/Screen/index.vue'
+import Volumn from './components/Volumn/index.vue'
+import { ENV_CONFIG, lanageArr, roomSourceData } from './const'
+const boxLine =  require('@/assets/taiguv1/svg/box_line.png')
 
-import { parseImgUrl } from '@/utils'
 // import "vue3-video-play/dist/style.css";
-import { videoPlay } from 'vue-video-play'
+const type = ref('zh')
+const route = useRoute()
+
+const checkLanage = (item) => {
+  type.value = item.type
+  console.log('被点击了')
+}
+
+const roomData =ref(roomSourceData)
+const roomInfo = ref({})
+const modeType = ref(1)
+
+const checkModel = (type) => {
+  modeType.value = type
+}
+
+const airStatus = ref(false)
 
-export default defineComponent({
-  components: {
-    Screen,
-    Volumn,
-    Lamp,
-    Air,
-    Curtain,
-    LightMore,
-    CurtainMore,
-    videoPlay,
-  },
+const getStatus = (flag) => {
+  airStatus.value = flag
+}   
+const isLightColorFlag = ref(false)
+const isLightMoreFlag = ref(false)
+const isCurtainMoreFlag = ref(false)
+const lightData = ref([])
 
-  setup() {
-    const proxyData = reactive({
-      parseImgUrl: parseImgUrl,
-      type: 'zh',
-      lanageArr: [
-        {
-          type: 'zh',
-          text: '中',
-        },
-        {
-          type: 'en',
-          text: 'EN',
-        },
-      ],
-      checkLanage(item) {
-        proxyData.type = item.type
-        console.log('被点击了')
-      },
-      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://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room1.png',
-          icon: require('@/assets/taiguv1/svg/meting_icon.svg'),
-          video:
-            'https://terra-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://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room2.png',
-          icon: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/room_metis.svg',
-          video:
-            'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video2.mp4',
-        },
-        {
-          id: 'room3',
-          name: 'ROOM NAIAD',
-          icon: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/room_naiad.svg',
-          modeBg:
-            'linear-gradient(113.73deg, rgba(8, 14, 37, 0.4) 17.26%, rgba(10, 15, 33, 0.9) 55.71%)',
-          bg: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room3.png',
-          video:
-            'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video3.mov',
-        },
-        {
-          id: 'room4',
-          name: 'ROOM HELIOS',
-          icon: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/room_helios.svg',
-          modeBg:
-            'linear-gradient(113.73deg, rgba(32, 5, 5, 0.4) 17.26%, rgba(28, 7, 7, 0.8) 55.71%)',
-          bg: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room4.png',
-          video:
-            'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video4.mp4',
-        },
-        {
-          id: 'room5',
-          name: 'ROOM GAIA',
-          icon: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/room_gaia.svg',
-          modeBg:
-            'linear-gradient(113.73deg, rgba(21, 32, 26, 0.5) 17.26%, rgba(14, 30, 21, 0.8) 55.71%)',
-          bg: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room5.png',
-          video:
-            'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room_video5.mp4',
-        },
-        {
-          id: 'room6',
-          name: 'ROOM AURA',
-          icon: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/room_aura.svg',
-          modeBg:
-            'linear-gradient(113.73deg, rgba(4, 18, 32, 0.5) 17.26%, rgba(6, 18, 32, 0.8) 55.71%)',
-          bg: 'https://terra-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room6.png',
-          video:
-            'https://terra-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,
-      isLightMoreFlag: false,
-      isCurtainMoreFlag: false,
-      lightData: [],
+const envParams = ref({})
+/**
+ 2、环境参数:
+2.1、温度和湿度,不参与评价,获取实时数据展示即可;CO2浓度超标时,自动触发开启该空间新风
+2.2、只有CO2 \TVOC \PM 2.5参与评价
+3.3、评价标准:以上三个参数大于上限值时,展示上限值,小于上限时,展示实时值
+3.3.1)、CO2:801<CO2<1200) ppm:良好;<800 ppm:优秀;上下限:400-1200
+3.3.2)、TVOC:501<TVOC<600 μg/m3:良好;<500 μg/m3:优秀;上下限:0-600
+3.3.3)、PM 2.5 :26<PM 2.5 <75 μg/m3:良好;<25 μg/m3:优秀;上下限:0-75
+ */
+const handleEnvData = (type, num) => {
+  const config = ENV_CONFIG[type]
+  if (!config) return num
+
+  if(num < config.min){
+    return {
+        value: num,
+        level: '优秀',
+        unit: config.unit
+    }
+  }
+  // 确保数值在有效范围内
+  const value = Math.min(Math.max(num, config.min), config.max)
+  
+  return {
+    value,
+    level: value <= config.threshold ? '优秀' : '良好',
+    unit: config.unit
+  }
+}
+
+onMounted(() => {
+
+  
+})
+
+     
 // 打开左弹框
-      showMore(type,showStatus) {
+    const showMore = (type,showStatus) => {
         console.log(type,showStatus)
-        proxyData.isLightColorFlag = true
+        isLightColorFlag.value = true
         if(type == "curtain"){
-          proxyData.isCurtainMoreFlag = showStatus
+       isCurtainMoreFlag.value = showStatus
         }else{
-          proxyData.isLightMoreFlag = showStatus
+          isLightMoreFlag.value = showStatus
         }
-      },
+      }
     //   关闭左弹框
-    closePopup(){
-      proxyData.isLightMoreFlag = false
-      proxyData.isCurtainMoreFlag = false
+   const closePopup = () => {
+      isLightMoreFlag.value = false
+      isCurtainMoreFlag.value = false
     }
-    })
+    
     onBeforeUnmount(() => {})
     onMounted(() => {
-      let route = useRoute()
       let roomId = route.query.id
-      proxyData.roomInfo = proxyData.roomData[0]
-      proxyData.roomData.map((item) => {
+      roomInfo.value = roomData.value[0]
+      // 获取环境参数
+    Object.keys(roomInfo.value.envParams).forEach(key => {
+        envParams.value[key] = handleEnvData(key, roomInfo.value.envParams[key])
+      })
+     
+      roomData.value.map((item) => {
         if (item.id == roomId) {
-          proxyData.roomInfo = item
+          roomInfo.value = item
         }
       })
 
       // proxyData.roomInfo.logo = require('@/assets/taiguv1/svg/meting_icon.svg')
-      proxyData.roomInfo.location = '3F'
+      roomInfo.value.location = '3F'
     })
-    return {
-      ...toRefs(proxyData),
-    }
-  },
-})
+
+
+
 </script>
 <style lang="scss">
 .main {