|
@@ -1,40 +1,64 @@
|
|
|
<template>
|
|
|
- <div class="volumn-box" :class="lampData.isOpen ? 'active' : ''">
|
|
|
- <div>
|
|
|
- <div class="top">
|
|
|
- <img :src="parseImgUrl('taiguv1/envmonitor', lampData.isOpen ? 'active/lamp.svg' : 'lamp.svg')" alt="" />
|
|
|
- <div class="top-right">
|
|
|
- <SwitchButton
|
|
|
- :loading="allLampStatus.all?.loading"
|
|
|
- @click.stop
|
|
|
- v-model="lampData.isOpen"
|
|
|
- @change="setLampStatus('isOpen')" />
|
|
|
+ <div
|
|
|
+ class="volumn-box"
|
|
|
+ :class="lampData.isOpen ? 'active' : ''"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div class="top">
|
|
|
+ <img
|
|
|
+ :src="parseImgUrl('taiguv1/envmonitor', lampData.isOpen ? 'active/lamp.svg' : 'lamp.svg')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div class="top-right">
|
|
|
+ <SwitchButton
|
|
|
+ :loading="allLampStatus.all?.loading"
|
|
|
+ @click.stop
|
|
|
+ v-model="lampData.isOpen"
|
|
|
+ @change="setLampStatus('isOpen')"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="filter-box">
|
|
|
+ <div
|
|
|
+ class="filter-item"
|
|
|
+ @click="searchMore"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="FilterIcon"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="filter-box">
|
|
|
- <div class="filter-item" @click="searchMore">
|
|
|
- <img :src="FilterIcon" alt="" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="bottom">
|
|
|
- <div class="bottom-box">
|
|
|
- <div class="bottom-left">
|
|
|
- <div class="text">光照</div>
|
|
|
- <div class="status">{{ lampData.lampStatusText }}</div>
|
|
|
- </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="bottom-box">
|
|
|
+ <div class="bottom-left">
|
|
|
+ <div class="text">光照</div>
|
|
|
+ <div class="status">{{ lampData.lampStatusText || '已关闭'}}</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="bottom-right" v-if="lampData.isOpen">
|
|
|
- {{ lampData.brightValue||0 }} <sup>%</sup>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="bottom-right"
|
|
|
+ v-if="lampData.isOpen"
|
|
|
+ >
|
|
|
+ {{ lampData.brightValue||0 }} <sup>%</sup>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="lamp-slider" v-if="lampData.isOpen">
|
|
|
- <Slider v-model="lampData.brightValue" :min="min" :max="max" @onEnd="setLampStatus('bright')"></Slider>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="lamp-slider"
|
|
|
+ v-if="lampData.isOpen"
|
|
|
+ >
|
|
|
+ <Slider
|
|
|
+ v-model="lampData.brightValue"
|
|
|
+ :min="min"
|
|
|
+ :max="max"
|
|
|
+ @onEnd="setLampStatus('bright')"
|
|
|
+ ></Slider>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
@@ -51,21 +75,21 @@ const emit = defineEmits(['getStatus', 'showMore'])
|
|
|
|
|
|
// 接收父组件传递的开关状态
|
|
|
const props = defineProps({
|
|
|
- lampStatus: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {
|
|
|
- isOpen: false,
|
|
|
- brightValue: 0
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- equipList: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return []
|
|
|
+ lampStatus: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {
|
|
|
+ isOpen: false,
|
|
|
+ brightValue: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ equipList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return []
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
})
|
|
|
|
|
|
const store = useStore()
|
|
@@ -73,182 +97,188 @@ const deviceControl = useDeviceControl()
|
|
|
const allLampStatus = computed(() => store.state.taiguv1.lampSwitchStatus)
|
|
|
|
|
|
const searchMore = () => {
|
|
|
- emit('showMore', 'lamp', true)
|
|
|
+ emit('showMore', 'lamp', true)
|
|
|
}
|
|
|
|
|
|
const lampData = ref({
|
|
|
- isOpen: false,
|
|
|
- brightValue: 0
|
|
|
+ isOpen: false,
|
|
|
+ brightValue: 0
|
|
|
})
|
|
|
|
|
|
watch(
|
|
|
- () => props.lampStatus,
|
|
|
- (newVal, oldVal) => {
|
|
|
- if (!newVal) {
|
|
|
- return
|
|
|
- }
|
|
|
- compareStatus(newVal)
|
|
|
- },
|
|
|
- { deep: true } // 添加深度监听
|
|
|
+ () => props.lampStatus,
|
|
|
+ (newVal, oldVal) => {
|
|
|
+ if (!newVal) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ compareStatus(newVal)
|
|
|
+ },
|
|
|
+ { deep: true } // 添加深度监听
|
|
|
)
|
|
|
|
|
|
const compareStatus = data => {
|
|
|
- if (allLampStatus.value.all) {
|
|
|
- if (allLampStatus.value.all.lastSwitchStatus == data.isOpen) {
|
|
|
- store.dispatch('taiguv1/setLampStatus', {
|
|
|
- id: 'all',
|
|
|
- status: {
|
|
|
- loading: false,
|
|
|
- lastSwitchStatus: data.isOpen
|
|
|
+ if (allLampStatus.value.all) {
|
|
|
+ if (allLampStatus.value.all.lastSwitchStatus == data.isOpen) {
|
|
|
+ store.dispatch('taiguv1/setLampStatus', {
|
|
|
+ id: 'all',
|
|
|
+ status: {
|
|
|
+ loading: false,
|
|
|
+ lastSwitchStatus: data.isOpen
|
|
|
+ }
|
|
|
+ })
|
|
|
+ lampData.value = {
|
|
|
+ ...data,
|
|
|
+ isOpen: data.isOpen
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ lampData.value = {
|
|
|
+ ...data,
|
|
|
+ isOpen: allLampStatus.value.all.lastSwitchStatus
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
- lampData.value = {
|
|
|
- ...data,
|
|
|
- isOpen: data.isOpen
|
|
|
- }
|
|
|
} else {
|
|
|
- lampData.value = {
|
|
|
- ...data,
|
|
|
- isOpen: allLampStatus.value.all.lastSwitchStatus
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- lampData.value = {
|
|
|
- ...data,
|
|
|
- isOpen: data.isOpen
|
|
|
+ lampData.value = {
|
|
|
+ ...data,
|
|
|
+ isOpen: data.isOpen
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- emit('getStatus', lampData.value.isOpen)
|
|
|
+ emit('getStatus', lampData.value.isOpen)
|
|
|
}
|
|
|
|
|
|
const setLampStatus = type => {
|
|
|
- if (type == 'isOpen') {
|
|
|
- store.dispatch('taiguv1/setLampStatus', {
|
|
|
- id: 'all',
|
|
|
- status: {
|
|
|
- loading: true,
|
|
|
- lastSwitchStatus: lampData.value.isOpen
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- const params = deviceControl.assemblyLampCommand(lampData.value[type], type, props.equipList)
|
|
|
- deviceControl.sendCommands(params)
|
|
|
+ if (type == 'isOpen') {
|
|
|
+ store.dispatch('taiguv1/setLampStatus', {
|
|
|
+ id: 'all',
|
|
|
+ status: {
|
|
|
+ loading: true,
|
|
|
+ lastSwitchStatus: lampData.value.isOpen
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const params = deviceControl.assemblyLampCommand(lampData.value[type], type, props.equipList)
|
|
|
+ deviceControl.sendCommands(params)
|
|
|
|
|
|
- emit('getStatus', lampData.value.isOpen)
|
|
|
+ emit('getStatus', lampData.value.isOpen)
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.volumn-box {
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 16px;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 24px 24px 44px 24px;
|
|
|
- background-color: rgba(255, 255, 255, 0.2);
|
|
|
- backdrop-filter: blur(40px);
|
|
|
- box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
|
|
|
- .top {
|
|
|
+ box-sizing: border-box;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- img {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- .filter-box {
|
|
|
- margin-top: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- gap: 10px;
|
|
|
- .filter-item {
|
|
|
- display: flex;
|
|
|
- width: 36px;
|
|
|
- height: 36px;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
- flex-shrink: 0;
|
|
|
- border-radius: 60px;
|
|
|
- background: var(--White-White-40, rgba(255, 255, 255, 0.4));
|
|
|
- }
|
|
|
- }
|
|
|
- .bottom {
|
|
|
- .bottom-box {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .text {
|
|
|
- width: 100%;
|
|
|
- //styleName: Chi/Body Large;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 300;
|
|
|
- line-height: 22px;
|
|
|
- letter-spacing: 0.02em;
|
|
|
- text-align: left;
|
|
|
- text-underline-position: from-font;
|
|
|
- text-decoration-skip-ink: none;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- padding-bottom: 2px;
|
|
|
- }
|
|
|
- .status {
|
|
|
- width: 100%;
|
|
|
- //styleName: Chi/Body XS;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-size: 11px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 14px;
|
|
|
- letter-spacing: 0.02em;
|
|
|
- color: rgba(255, 255, 255, 0.4);
|
|
|
+ padding: 16px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 24px 24px 44px 24px;
|
|
|
+ background-color: rgba(255, 255, 255, 0.2);
|
|
|
+ backdrop-filter: blur(40px);
|
|
|
+ box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
- .bottom-right {
|
|
|
- text-align: center;
|
|
|
- font-size: 20px;
|
|
|
- width: 50px;
|
|
|
- height: 30px;
|
|
|
- // color: var(--Blue, #001428);
|
|
|
- align-self: end;
|
|
|
- line-height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: end;
|
|
|
+ .filter-box {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 10px;
|
|
|
+ .filter-item {
|
|
|
+ display: flex;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 60px;
|
|
|
+ background: var(--White-White-40, rgba(255, 255, 255, 0.4));
|
|
|
+ }
|
|
|
}
|
|
|
- .lamp-slider {
|
|
|
- margin-top: 8px;
|
|
|
- background: rgba(255, 255, 255, 0.6);
|
|
|
- width: 100%;
|
|
|
- height: 34px;
|
|
|
- border-radius: 12px;
|
|
|
+ .bottom {
|
|
|
+ .bottom-box {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ width: 100%;
|
|
|
+ //styleName: Chi/Body Large;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 300;
|
|
|
+ line-height: 22px;
|
|
|
+ letter-spacing: 0.02em;
|
|
|
+ text-align: left;
|
|
|
+ text-underline-position: from-font;
|
|
|
+ text-decoration-skip-ink: none;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ padding-bottom: 2px;
|
|
|
+ }
|
|
|
+ .status {
|
|
|
+ width: 100%;
|
|
|
+ //styleName: Chi/Body XS;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 14px;
|
|
|
+ letter-spacing: 0.02em;
|
|
|
+ color: rgba(255, 255, 255, 0.4);
|
|
|
+ }
|
|
|
+ .bottom-right {
|
|
|
+ text-align: center;
|
|
|
+ color: var(--Blue, #001428);
|
|
|
+ /* En/H2 */
|
|
|
+ font-family: Jost;
|
|
|
+ font-size: 20px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 300;
|
|
|
+ line-height: normal;
|
|
|
+ width: 50px;
|
|
|
+ height: 30px;
|
|
|
+ // color: var(--Blue, #001428);
|
|
|
+ align-self: end;
|
|
|
+ line-height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: end;
|
|
|
+ }
|
|
|
+ .lamp-slider {
|
|
|
+ background: rgba(255, 255, 255, 0.6);
|
|
|
+ width: 100%;
|
|
|
+ height: 34px;
|
|
|
+ border-radius: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- // .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;
|
|
|
+ // }
|
|
|
}
|
|
|
.active {
|
|
|
- background: rgba(255, 255, 255, 0.8);
|
|
|
- backdrop-filter: blur(40px);
|
|
|
- box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ backdrop-filter: blur(40px);
|
|
|
+ box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
|
|
|
|
|
|
- .bottom {
|
|
|
- .text {
|
|
|
- color: rgba(0, 20, 40, 1);
|
|
|
- }
|
|
|
- .status {
|
|
|
- color: rgba(116, 128, 141, 1);
|
|
|
- }
|
|
|
- .bottom-right {
|
|
|
- font-family: Jost;
|
|
|
- color: rgba(0, 20, 40, 1);
|
|
|
+ .bottom {
|
|
|
+ .text {
|
|
|
+ color: rgba(0, 20, 40, 1);
|
|
|
+ }
|
|
|
+ .status {
|
|
|
+ color: rgba(116, 128, 141, 1);
|
|
|
+ }
|
|
|
+ .bottom-right {
|
|
|
+ font-family: Jost;
|
|
|
+ color: rgba(0, 20, 40, 1);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</style>
|