|
@@ -1,19 +1,32 @@
|
|
|
<template>
|
|
|
- <div class="volumn-box" :class="lampData.isOpen ? 'active' : ''">
|
|
|
+ <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="" />
|
|
|
+ <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')" />
|
|
|
+ @change="setLampStatus('isOpen')"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="filter-box">
|
|
|
- <div class="filter-item" @click="searchMore">
|
|
|
- <img :src="FilterIcon" alt="" />
|
|
|
+ <div
|
|
|
+ class="filter-item"
|
|
|
+ @click="searchMore"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="FilterIcon"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -25,36 +38,45 @@
|
|
|
<div class="status">{{ $t(`lamp.${lampData.lampStatusText}`) }}</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="bottom-right" v-if="lampData.isOpen">{{ customRound(lampData.brightValue,20) || 0 }} <sup>%</sup></div>
|
|
|
+ <div
|
|
|
+ class="bottom-right"
|
|
|
+ v-if="lampData.isOpen"
|
|
|
+ >
|
|
|
+ {{ customRound(lampData.brightValue, 20) || 0 }} <sup>%</sup>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="lamp-slider" v-if="lampData.isOpen">
|
|
|
+ <div
|
|
|
+ class="lamp-slider"
|
|
|
+ v-if="lampData.isOpen"
|
|
|
+ >
|
|
|
<Slider
|
|
|
v-model="lampData.brightValue"
|
|
|
:min="min"
|
|
|
:max="max"
|
|
|
@onStart="sendEvent(true)"
|
|
|
- @onEnd="setLampStatus('brightValue')"></Slider>
|
|
|
+ @onEnd="setLampStatus('brightValue')"
|
|
|
+ ></Slider>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import FilterIcon from "@/assets/taiguv1/svg/filter_icon.svg"
|
|
|
-import Slider from "@/components/slider/Slider.vue"
|
|
|
-import SwitchButton from "@/components/switch-button/SwitchButton.vue"
|
|
|
-import useDeviceControl from "@/hooks/useDeviceControl"
|
|
|
-import { customRound } from "@/utils"
|
|
|
-import { useStore } from "@/store"
|
|
|
-import { parseImgUrl } from "@/utils"
|
|
|
-import { computed, ref, watch } from "vue"
|
|
|
-import eventBus from "@/utils/eventBus"
|
|
|
+import FilterIcon from '@/assets/taiguv1/svg/filter_icon.svg';
|
|
|
+import Slider from '@/components/slider/Slider.vue';
|
|
|
+import SwitchButton from '@/components/switch-button/SwitchButton.vue';
|
|
|
+import useDeviceControl from '@/hooks/useDeviceControl';
|
|
|
+import { customRound } from '@/utils';
|
|
|
+import { useStore } from '@/store';
|
|
|
+import { parseImgUrl } from '@/utils';
|
|
|
+import { computed, ref, watch } from 'vue';
|
|
|
+import eventBus from '@/utils/eventBus';
|
|
|
import { constants } from 'fs';
|
|
|
-const min = 0
|
|
|
-const max = 100
|
|
|
-let closeUpdate = false
|
|
|
-const emit = defineEmits(["getStatus", "showMore"])
|
|
|
+const min = 0;
|
|
|
+const max = 100;
|
|
|
+let closeUpdate = false;
|
|
|
+const emit = defineEmits(['getStatus', 'showMore']);
|
|
|
|
|
|
// 接收父组件传递的开关状态
|
|
|
const props = defineProps({
|
|
@@ -63,104 +85,120 @@ const props = defineProps({
|
|
|
default: () => {
|
|
|
return {
|
|
|
isOpen: false,
|
|
|
- brightValue: 0
|
|
|
- }
|
|
|
- }
|
|
|
+ brightValue: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
},
|
|
|
equipList: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
- return []
|
|
|
- }
|
|
|
- }
|
|
|
-})
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ lampScenceControlGroup: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
|
|
|
|
|
-const store = useStore()
|
|
|
-const deviceControl = useDeviceControl()
|
|
|
-const allLampStatus = computed(() => store.state.taiguv1.lampSwitchStatus)
|
|
|
+const store = useStore();
|
|
|
+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
|
|
|
-})
|
|
|
+ brightValue: 0,
|
|
|
+});
|
|
|
|
|
|
watch(
|
|
|
() => props.lampStatus,
|
|
|
(newVal, oldVal) => {
|
|
|
if (!newVal || closeUpdate) {
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
- compareStatus(newVal)
|
|
|
+ compareStatus(newVal);
|
|
|
},
|
|
|
{ deep: true } // 添加深度监听
|
|
|
-)
|
|
|
+);
|
|
|
|
|
|
-const compareStatus = data => {
|
|
|
+const compareStatus = (data) => {
|
|
|
const updateLampData = () => {
|
|
|
lampData.value = {
|
|
|
...data,
|
|
|
- isOpen: data.isOpen
|
|
|
- }
|
|
|
- console.log("data==",data);
|
|
|
- }
|
|
|
+ isOpen: data.isOpen,
|
|
|
+ };
|
|
|
+ console.log('data==', data);
|
|
|
+ };
|
|
|
if (allLampStatus.value.all) {
|
|
|
if (allLampStatus.value.all.lastSwitchStatus == data.isOpen) {
|
|
|
- store.dispatch("taiguv1/setLampStatus", {
|
|
|
- id: "all",
|
|
|
+ store.dispatch('taiguv1/setLampStatus', {
|
|
|
+ id: 'all',
|
|
|
status: {
|
|
|
loading: false,
|
|
|
- lastSwitchStatus: null
|
|
|
- }
|
|
|
- })
|
|
|
- updateLampData()
|
|
|
+ lastSwitchStatus: null,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ updateLampData();
|
|
|
} else if (allLampStatus.value.all.lastSwitchStatus === null) {
|
|
|
- updateLampData()
|
|
|
+ updateLampData();
|
|
|
} else {
|
|
|
lampData.value = {
|
|
|
...data,
|
|
|
- isOpen: allLampStatus.value.all.lastSwitchStatus
|
|
|
- }
|
|
|
+ isOpen: allLampStatus.value.all.lastSwitchStatus,
|
|
|
+ };
|
|
|
}
|
|
|
} else {
|
|
|
lampData.value = {
|
|
|
...data,
|
|
|
- isOpen: data.isOpen
|
|
|
- }
|
|
|
+ isOpen: data.isOpen,
|
|
|
+ };
|
|
|
}
|
|
|
- emit("getStatus", lampData.value.isOpen)
|
|
|
-}
|
|
|
-const sendEvent = close => {
|
|
|
- closeUpdate = close
|
|
|
- eventBus.emit("close_deviece_timer", { close })
|
|
|
-}
|
|
|
-const debouncedSendEvent = deviceControl.debounce(sendEvent, 1500)
|
|
|
+ emit('getStatus', lampData.value.isOpen);
|
|
|
+};
|
|
|
+const sendEvent = (close) => {
|
|
|
+ closeUpdate = close;
|
|
|
+ eventBus.emit('close_deviece_timer', { close });
|
|
|
+};
|
|
|
+const debouncedSendEvent = deviceControl.debounce(sendEvent, 1500);
|
|
|
|
|
|
-const setLampStatus = type => {
|
|
|
- if (type == "isOpen") {
|
|
|
- store.dispatch("taiguv1/setLampStatus", {
|
|
|
- id: "all",
|
|
|
+const setLampStatus = (type) => {
|
|
|
+ if (type == 'isOpen') {
|
|
|
+ store.dispatch('taiguv1/setLampStatus', {
|
|
|
+ id: 'all',
|
|
|
status: {
|
|
|
loading: true,
|
|
|
- lastSwitchStatus: lampData.value.isOpen
|
|
|
- }
|
|
|
- })
|
|
|
- }else{
|
|
|
- lampData.value[type]=customRound(lampData.value[type],20)
|
|
|
+ lastSwitchStatus: lampData.value.isOpen,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ lampData.value[type] = customRound(lampData.value[type], 20);
|
|
|
}
|
|
|
|
|
|
- sendEvent(true)
|
|
|
- const params = deviceControl.assemblyLampCommand(lampData.value[type], type, props.equipList)
|
|
|
-
|
|
|
+ sendEvent(true);
|
|
|
+ const params = deviceControl.assemblyLampCommand(lampData.value[type], type, props.equipList);
|
|
|
deviceControl.sendCommands(params, () => {
|
|
|
- debouncedSendEvent(false)
|
|
|
- })
|
|
|
+ debouncedSendEvent(false);
|
|
|
+ });
|
|
|
+ // if (type == 'isOpen') {
|
|
|
+ // let params = { ...props.lampScenceControlGroup, value: lampData.value.isOpen ? 1 : 0 };
|
|
|
+ // deviceControl.sendCommands(params, () => {
|
|
|
+ // debouncedSendEvent(false);
|
|
|
+ // });
|
|
|
+ // } else {
|
|
|
+ // const params = deviceControl.assemblyLampCommand(lampData.value[type], type, props.equipList);
|
|
|
+ // deviceControl.sendCommands(params, () => {
|
|
|
+ // debouncedSendEvent(false);
|
|
|
+ // });
|
|
|
+ // }
|
|
|
|
|
|
- emit("getStatus", lampData.value.isOpen)
|
|
|
-}
|
|
|
+ emit('getStatus', lampData.value.isOpen);
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.volumn-box {
|