|
@@ -1,273 +1,250 @@
|
|
|
<template>
|
|
|
- <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"
|
|
|
- :class="topActive ? 'active' : ''"
|
|
|
- @click="handle('all',1,'开启中','EquipOnSet')"
|
|
|
- >{{ $t(`common.全开`) }}</div>
|
|
|
- <div
|
|
|
- class="control_all"
|
|
|
- :class="downActive ? 'active' : ''"
|
|
|
- @click="handle('all',0,'关闭中','EquipOffSet')"
|
|
|
- >{{ $t(`common.全关`) }}</div>
|
|
|
- </div>
|
|
|
+ <div class="more-box">
|
|
|
+ <div class="light-more-top">
|
|
|
+ <div class="left">
|
|
|
+ <div class="light-box">
|
|
|
+ <img :src="curtainIcon" alt="" />
|
|
|
</div>
|
|
|
- <div class="control_status">{{ controlStatus ? $t(`curtains.${controlStatus}`) : '' }}</div>
|
|
|
- <div class="light-bottom">
|
|
|
- <div
|
|
|
- class="item-box"
|
|
|
- v-for="(item, index) in childCurtains"
|
|
|
- :key="item.id"
|
|
|
- >
|
|
|
- <div class="name">{{ item.localName }}</div>
|
|
|
- <div class="control-box">
|
|
|
- <div
|
|
|
- class="control"
|
|
|
- @click="handle('child',1,'开启中','EquipOnSet',item.id)"
|
|
|
- >
|
|
|
- <img :src="item.isActive && item.activeButton === 1 ? UpActiveIcon : UpUnActiveIcon" alt="">
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="control"
|
|
|
- @click="handle('child',2,'暂停中','StopSet',item.id)"
|
|
|
- >
|
|
|
- <img :src="item.isActive && item.activeButton === 2 ? StopActiveIcon : StopUnActiveIcon" alt="">
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="control"
|
|
|
- @click="handle('child',0,'关闭中','EquipOffSet',item.id)"
|
|
|
- >
|
|
|
- <img :src="item.isActive && item.activeButton === 0 ? DownActiveIcon : DownUnActiveIcon" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="control_all" :class="topActive ? 'active' : ''" @click="handle('all', 1, '开启中', 'EquipOnSet')">
|
|
|
+ {{ $t(`common.全开`) }}
|
|
|
</div>
|
|
|
+ <div class="control_all" :class="downActive ? 'active' : ''" @click="handle('all', 0, '关闭中', 'EquipOffSet')">
|
|
|
+ {{ $t(`common.全关`) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control_status">{{ controlStatus ? $t(`curtains.${controlStatus}`) : '' }}</div>
|
|
|
+ <div class="light-bottom">
|
|
|
+ <div class="item-box" v-for="item in childCurtains" :key="item.id">
|
|
|
+ <div class="name">{{ item.localName }}</div>
|
|
|
+ <div class="control-box">
|
|
|
+ <div class="control" @click="handle('child', 1, '开启中', 'EquipOnSet', item.id)">
|
|
|
+ <img :src="item.isActive && item.activeButton === 1 ? UpActiveIcon : UpUnActiveIcon" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="control" @click="handle('child', 2, '暂停中', 'StopSet', item.id)">
|
|
|
+ <img :src="item.isActive && item.activeButton === 2 ? StopActiveIcon : StopUnActiveIcon" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="control" @click="handle('child', 0, '关闭中', 'EquipOffSet', item.id)">
|
|
|
+ <img :src="item.isActive && item.activeButton === 0 ? DownActiveIcon : DownUnActiveIcon" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { httpSetEnv } from '@/apis/taiguv1';
|
|
|
-import curtainIcon from '@/assets/taiguv1/svg/Curtain_card_active_icon.svg';
|
|
|
-import DownActiveIcon from '@/assets/taiguv1/svg/down_active_icon.svg';
|
|
|
-import DownUnActiveIcon from '@/assets/taiguv1/svg/down_icon.svg';
|
|
|
-import StopActiveIcon from '@/assets/taiguv1/svg/stop_active_icon.svg';
|
|
|
-import StopUnActiveIcon from '@/assets/taiguv1/svg/stop_icon.svg';
|
|
|
-import UpActiveIcon from '@/assets/taiguv1/svg/up_active_icon.svg';
|
|
|
-import UpUnActiveIcon from '@/assets/taiguv1/svg/up_icon.svg';
|
|
|
-import { ref, watch } from "vue";
|
|
|
+import { httpSetEnv } from '@/apis/taiguv1'
|
|
|
+import curtainIcon from '@/assets/taiguv1/svg/Curtain_card_active_icon.svg'
|
|
|
+import DownActiveIcon from '@/assets/taiguv1/svg/down_active_icon.svg'
|
|
|
+import DownUnActiveIcon from '@/assets/taiguv1/svg/down_icon.svg'
|
|
|
+import StopActiveIcon from '@/assets/taiguv1/svg/stop_active_icon.svg'
|
|
|
+import StopUnActiveIcon from '@/assets/taiguv1/svg/stop_icon.svg'
|
|
|
+import UpActiveIcon from '@/assets/taiguv1/svg/up_active_icon.svg'
|
|
|
+import UpUnActiveIcon from '@/assets/taiguv1/svg/up_icon.svg'
|
|
|
+import { ref, watch } from 'vue'
|
|
|
const props = defineProps({
|
|
|
- currentCurtains: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- }
|
|
|
+ currentCurtains: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ }
|
|
|
})
|
|
|
const childCurtains = ref([])
|
|
|
const controlStatus = ref('')
|
|
|
const topActive = ref(false)
|
|
|
const downActive = ref(false)
|
|
|
let timer = null // 添加timer变量
|
|
|
-let btnTimer = null;
|
|
|
-const setEnnv = (type,value,code,curentID )=>{
|
|
|
- const paramsData = []
|
|
|
- if (type === 'all') {
|
|
|
- childCurtains.value.forEach((item) => {
|
|
|
- paramsData.push({
|
|
|
- id:item.id,
|
|
|
- value,
|
|
|
- code
|
|
|
- })
|
|
|
- })
|
|
|
- }else{
|
|
|
- let paramsObj = {
|
|
|
- id:curentID,
|
|
|
- value,
|
|
|
- code
|
|
|
- }
|
|
|
- paramsData.push(paramsObj)
|
|
|
+let btnTimer = null
|
|
|
+const setEnnv = (type, value, code, curentID) => {
|
|
|
+ const paramsData = []
|
|
|
+ if (type === 'all') {
|
|
|
+ childCurtains.value.forEach(item => {
|
|
|
+ paramsData.push({
|
|
|
+ id: item.id,
|
|
|
+ value,
|
|
|
+ code
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ let paramsObj = {
|
|
|
+ id: curentID,
|
|
|
+ value,
|
|
|
+ code
|
|
|
}
|
|
|
- httpSetEnv(paramsData)
|
|
|
+ paramsData.push(paramsObj)
|
|
|
+ }
|
|
|
+ httpSetEnv(paramsData)
|
|
|
}
|
|
|
-const handle = (type, status, name,code, curentID) => {
|
|
|
- controlStatus.value = name;
|
|
|
- // 清除之前的定时器
|
|
|
- if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- }
|
|
|
- if (btnTimer) {
|
|
|
- clearTimeout(btnTimer);
|
|
|
- }
|
|
|
- // 设置新的定时器并保存引用
|
|
|
- timer = setTimeout(() => {
|
|
|
- controlStatus.value = '';
|
|
|
- }, 3000);
|
|
|
- if (type === 'all') {
|
|
|
- if (status === 1) {
|
|
|
- topActive.value = true;
|
|
|
- } else {
|
|
|
- downActive.value = true;
|
|
|
- }
|
|
|
- btnTimer = setTimeout(() => {
|
|
|
- topActive.value = false;
|
|
|
- downActive.value = false;
|
|
|
- }, 100);
|
|
|
- setEnnv(type,status,code )
|
|
|
+const handle = (type, status, name, code, curentID) => {
|
|
|
+ controlStatus.value = name
|
|
|
+ // 清除之前的定时器
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer)
|
|
|
+ }
|
|
|
+ if (btnTimer) {
|
|
|
+ clearTimeout(btnTimer)
|
|
|
+ }
|
|
|
+ // 设置新的定时器并保存引用
|
|
|
+ timer = setTimeout(() => {
|
|
|
+ controlStatus.value = ''
|
|
|
+ }, 3000)
|
|
|
+ if (type === 'all') {
|
|
|
+ if (status === 1) {
|
|
|
+ topActive.value = true
|
|
|
} else {
|
|
|
- setEnnv(type,status,code,curentID)
|
|
|
- childCurtains.value.forEach((item) => {
|
|
|
-
|
|
|
- if (item.id === curentID) {
|
|
|
- item.activeButton = status;
|
|
|
- item.isActive = true;
|
|
|
- } else {
|
|
|
- item.isActive = false;
|
|
|
- item.activeButton = null;
|
|
|
- }
|
|
|
- })
|
|
|
- btnTimer = setTimeout(() => {
|
|
|
- childCurtains.value.forEach(item => {
|
|
|
- item.isActive = false;
|
|
|
- item.activeButton = null;
|
|
|
- });
|
|
|
- }, 1000);
|
|
|
+ downActive.value = true
|
|
|
}
|
|
|
-};
|
|
|
-watch(
|
|
|
- ()=>props.currentCurtains,
|
|
|
- (newVal) => {
|
|
|
- childCurtains.value = JSON.parse(JSON.stringify(newVal));
|
|
|
- childCurtains.value.forEach(item=>{
|
|
|
+ btnTimer = setTimeout(() => {
|
|
|
+ topActive.value = false
|
|
|
+ downActive.value = false
|
|
|
+ }, 100)
|
|
|
+ setEnnv(type, status, code)
|
|
|
+ } else {
|
|
|
+ setEnnv(type, status, code, curentID)
|
|
|
+ childCurtains.value.forEach(item => {
|
|
|
+ if (item.id === curentID) {
|
|
|
+ item.activeButton = status
|
|
|
+ item.isActive = true
|
|
|
+ } else {
|
|
|
+ item.isActive = false
|
|
|
+ item.activeButton = null
|
|
|
+ }
|
|
|
+ })
|
|
|
+ btnTimer = setTimeout(() => {
|
|
|
+ childCurtains.value.forEach(item => {
|
|
|
item.isActive = false
|
|
|
item.activeButton = null
|
|
|
- })
|
|
|
- },
|
|
|
- { immediate: true }
|
|
|
+ })
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+}
|
|
|
+watch(
|
|
|
+ () => props.currentCurtains,
|
|
|
+ newVal => {
|
|
|
+ childCurtains.value = JSON.parse(JSON.stringify(newVal))
|
|
|
+ childCurtains.value.forEach(item => {
|
|
|
+ item.isActive = false
|
|
|
+ item.activeButton = null
|
|
|
+ })
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
)
|
|
|
-
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.more-box {
|
|
|
- .light-more-top {
|
|
|
+ .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;
|
|
|
- .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: #e1e1df;
|
|
|
- box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
|
|
|
- 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;
|
|
|
- }
|
|
|
- .control_all.active {
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
|
|
|
- }
|
|
|
- }
|
|
|
+ gap: 12px;
|
|
|
+ border-radius: 50px;
|
|
|
+ background: #e1e1df;
|
|
|
+ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .control_all.active {
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
|
|
|
+ }
|
|
|
}
|
|
|
- .control_status {
|
|
|
- margin-top: 12px;
|
|
|
- width: 110px;
|
|
|
- height: 22px;
|
|
|
+ }
|
|
|
+ .control_status {
|
|
|
+ margin-top: 12px;
|
|
|
+ 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: normal;
|
|
|
+ letter-spacing: 0.32px;
|
|
|
+ }
|
|
|
+ .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: rgba(255, 255, 255, 0.2);
|
|
|
+ margin-bottom: 12px;
|
|
|
+ .name {
|
|
|
+ //styleName: Chi/Body Regular;
|
|
|
color: var(--Blue, #001428);
|
|
|
- text-align: center;
|
|
|
- /* Chi/Body Large */
|
|
|
- font-family: "PingFang SC";
|
|
|
- font-size: 16px;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ font-size: 14px;
|
|
|
font-style: normal;
|
|
|
- font-weight: 300;
|
|
|
+ font-weight: 400;
|
|
|
line-height: normal;
|
|
|
- letter-spacing: 0.32px;
|
|
|
- }
|
|
|
- .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: rgba(255, 255, 255, 0.2);
|
|
|
- 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: 36px;
|
|
|
- height: 36px;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- margin-left: 10px;
|
|
|
- // img{
|
|
|
- // width: 17px;
|
|
|
- // height: 17px;
|
|
|
- // }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .light-box-active {
|
|
|
- background: rgba(255, 255, 255, 0.6);
|
|
|
+ letter-spacing: 0.28px;
|
|
|
+ }
|
|
|
+ .control-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .control {
|
|
|
+ display: flex;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 10px;
|
|
|
+ // img{
|
|
|
+ // width: 17px;
|
|
|
+ // height: 17px;
|
|
|
+ // }
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .light-box-active {
|
|
|
+ background: rgba(255, 255, 255, 0.6);
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<
|