|
|
|
@ -277,61 +277,73 @@
|
|
|
|
|
title="定时开关机功能" |
|
|
|
|
:visible.sync="isOpenTimeSwitch" |
|
|
|
|
append-to-body |
|
|
|
|
width="800px" |
|
|
|
|
> |
|
|
|
|
<div class="device-container" v-loading="loading"> |
|
|
|
|
<div class="device-li"> |
|
|
|
|
<div class="device-name">定时名称</div> |
|
|
|
|
<div class="device-name">定时开机</div> |
|
|
|
|
<div class="device-name">定时关机</div> |
|
|
|
|
<div class="device-name">启动状态</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="device-li" v-for="(item, index) in delayList" :key="index"> |
|
|
|
|
<div class="device-name">{{ item.name }}</div> |
|
|
|
|
<div class="device-name"> |
|
|
|
|
<el-input |
|
|
|
|
size="mini" |
|
|
|
|
v-model="item.delayOpenHour" |
|
|
|
|
@keyup.enter.native="handleSwitchEnter(item, 'openHour', $event)" |
|
|
|
|
@input="handleSwitchInput(item, 'delayOpenHour', 'hour')" |
|
|
|
|
></el-input> |
|
|
|
|
<div class="slip">:</div> |
|
|
|
|
<el-input |
|
|
|
|
size="mini" |
|
|
|
|
v-model="item.delayOpenMinute" |
|
|
|
|
@keyup.enter.native=" |
|
|
|
|
handleSwitchEnter(item, 'openMinute', $event) |
|
|
|
|
" |
|
|
|
|
@input="handleSwitchInput(item, 'delayOpenMinute', 'minute')" |
|
|
|
|
></el-input> |
|
|
|
|
</div> |
|
|
|
|
<div class="device-name"> |
|
|
|
|
<el-input |
|
|
|
|
size="mini" |
|
|
|
|
v-model="item.delayCloseHour" |
|
|
|
|
@keyup.enter.native="handleSwitchEnter(item, 'closeHour', $event)" |
|
|
|
|
@input="handleSwitchInput(item, 'delayCloseHour', 'hour')" |
|
|
|
|
></el-input> |
|
|
|
|
<div class="slip">:</div> |
|
|
|
|
<el-input |
|
|
|
|
size="mini" |
|
|
|
|
v-model="item.delayCloseMinute" |
|
|
|
|
@keyup.enter.native=" |
|
|
|
|
handleSwitchEnter(item, 'closeMinute', $event) |
|
|
|
|
" |
|
|
|
|
@input="handleSwitchInput(item, 'delayCloseMinute', 'minute')" |
|
|
|
|
></el-input> |
|
|
|
|
<div class="dialog-content"> |
|
|
|
|
<div class="device-container" v-loading="loading"> |
|
|
|
|
<div class="device-li"> |
|
|
|
|
<div class="device-name">定时名称</div> |
|
|
|
|
<div class="device-name">定时开机</div> |
|
|
|
|
<div class="device-name">定时关机</div> |
|
|
|
|
<div class="device-name">启动状态</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="device-name"> |
|
|
|
|
<el-switch |
|
|
|
|
style="display: block" |
|
|
|
|
active-color="#13ce66" |
|
|
|
|
inactive-color="#ff4949" |
|
|
|
|
active-text="开启" |
|
|
|
|
inactive-text="停用" |
|
|
|
|
v-model="item.delayStatus" |
|
|
|
|
@change="handleSwitchStatus(item)" |
|
|
|
|
> |
|
|
|
|
</el-switch> |
|
|
|
|
<div |
|
|
|
|
class="device-li" |
|
|
|
|
v-for="(item, index) in delayList" |
|
|
|
|
:key="index" |
|
|
|
|
:class="{ highlight: item.name.includes(currentWeekday) }" |
|
|
|
|
> |
|
|
|
|
<div class="device-name">{{ item.name }}</div> |
|
|
|
|
<div class="device-name"> |
|
|
|
|
<el-input |
|
|
|
|
size="mini" |
|
|
|
|
v-model="item.delayOpenHour" |
|
|
|
|
@keyup.enter.native=" |
|
|
|
|
handleSwitchEnter(item, 'openHour', $event) |
|
|
|
|
" |
|
|
|
|
@input="handleSwitchInput(item, 'delayOpenHour', 'hour')" |
|
|
|
|
></el-input> |
|
|
|
|
<div class="slip">:</div> |
|
|
|
|
<el-input |
|
|
|
|
size="mini" |
|
|
|
|
v-model="item.delayOpenMinute" |
|
|
|
|
@keyup.enter.native=" |
|
|
|
|
handleSwitchEnter(item, 'openMinute', $event) |
|
|
|
|
" |
|
|
|
|
@input="handleSwitchInput(item, 'delayOpenMinute', 'minute')" |
|
|
|
|
></el-input> |
|
|
|
|
</div> |
|
|
|
|
<div class="device-name"> |
|
|
|
|
<el-input |
|
|
|
|
size="mini" |
|
|
|
|
v-model="item.delayCloseHour" |
|
|
|
|
@keyup.enter.native=" |
|
|
|
|
handleSwitchEnter(item, 'closeHour', $event) |
|
|
|
|
" |
|
|
|
|
@input="handleSwitchInput(item, 'delayCloseHour', 'hour')" |
|
|
|
|
></el-input> |
|
|
|
|
<div class="slip">:</div> |
|
|
|
|
<el-input |
|
|
|
|
size="mini" |
|
|
|
|
v-model="item.delayCloseMinute" |
|
|
|
|
@keyup.enter.native=" |
|
|
|
|
handleSwitchEnter(item, 'closeMinute', $event) |
|
|
|
|
" |
|
|
|
|
@input="handleSwitchInput(item, 'delayCloseMinute', 'minute')" |
|
|
|
|
></el-input> |
|
|
|
|
</div> |
|
|
|
|
<div class="device-name"> |
|
|
|
|
<el-switch |
|
|
|
|
style="display: block" |
|
|
|
|
active-color="#13ce66" |
|
|
|
|
inactive-color="#ff4949" |
|
|
|
|
active-text="开启" |
|
|
|
|
inactive-text="停用" |
|
|
|
|
v-model="item.delayStatus" |
|
|
|
|
@change="handleSwitchStatus(item)" |
|
|
|
|
> |
|
|
|
|
</el-switch> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
@ -381,6 +393,7 @@ export default {
|
|
|
|
|
frequency: "v", |
|
|
|
|
isOpenTimeSwitch: false, |
|
|
|
|
delayList: [], |
|
|
|
|
currentWeekday: "", |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
@ -412,6 +425,21 @@ export default {
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
const weekdays = [ |
|
|
|
|
"星期日", |
|
|
|
|
"星期一", |
|
|
|
|
"星期二", |
|
|
|
|
"星期三", |
|
|
|
|
"星期四", |
|
|
|
|
"星期五", |
|
|
|
|
"星期六", |
|
|
|
|
]; |
|
|
|
|
const date = new Date(); |
|
|
|
|
const dayIndex = date.getDay(); |
|
|
|
|
this.currentWeekday = weekdays[dayIndex]; |
|
|
|
|
console.log("今天是星期几", this.currentWeekday); |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.getSysBuild(); |
|
|
|
|
}, |
|
|
|
@ -1553,6 +1581,43 @@ export default {
|
|
|
|
|
color: #9ca3af; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.highlight { |
|
|
|
|
background-color: rgb(118, 134, 145) !important; /* 定义高亮的背景颜色 */ |
|
|
|
|
color: #ffffff !important; |
|
|
|
|
font-weight: bold; |
|
|
|
|
} |
|
|
|
|
.device-container .highlight .device-name .slip { |
|
|
|
|
color: #ffffff !important; |
|
|
|
|
font-weight: bold; |
|
|
|
|
} |
|
|
|
|
/* 为高亮行添加图片箭头 */ |
|
|
|
|
.device-li.highlight::before { |
|
|
|
|
content: ""; |
|
|
|
|
background-image: url("../../../assets/images/step.png"); |
|
|
|
|
background-size: contain; |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
width: 30px; |
|
|
|
|
height: 30px; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 2px; /* 图片位置,根据实际情况调整 */ |
|
|
|
|
top: 20%; |
|
|
|
|
transform: translateY(-50%); |
|
|
|
|
z-index: 999; |
|
|
|
|
animation: moveRight 1s ease-in-out infinite alternate; |
|
|
|
|
} |
|
|
|
|
@keyframes moveRight { |
|
|
|
|
0% { |
|
|
|
|
transform: translateX(0); /* 初始位置,不移动 */ |
|
|
|
|
} |
|
|
|
|
100% { |
|
|
|
|
transform: translateX(0.04rem); /* 向右移动 1rem 的距离 */ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 确保 device-li 有相对定位 */ |
|
|
|
|
.device-li { |
|
|
|
|
position: relative; |
|
|
|
|
} |
|
|
|
|
// 媒体查询,适配大于2000px分辨率的大屏样式 |
|
|
|
|
@media (min-width: 2000px) { |
|
|
|
|
.device-container { |
|
|
|
|