|
@@ -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 {
|