|
|
|
|
@ -5,29 +5,17 @@ |
|
|
|
|
<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px"> |
|
|
|
|
<el-form-item label="设备名称"> |
|
|
|
|
<el-select v-model="queryParams.devName" placeholder="请选择设备" @change="handleDevChange"> |
|
|
|
|
<el-option label="所有" value="0" /> |
|
|
|
|
<el-option v-for="item in devArr" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" /> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="执行日期" prop="week"> |
|
|
|
|
<el-select v-model="queryParams.week" placeholder="请选择执行日期" style="width: 240px"> |
|
|
|
|
<el-option label="所有" value="0" /> |
|
|
|
|
<el-option label="星期一" value="1" /> |
|
|
|
|
<el-option label="星期二" value="2" /> |
|
|
|
|
<el-option label="星期三" value="3" /> |
|
|
|
|
<el-option label="星期四" value="4" /> |
|
|
|
|
<el-option label="星期五" value="5" /> |
|
|
|
|
<el-option label="星期六" value="6" /> |
|
|
|
|
<el-option label="星期日" value="7" /> |
|
|
|
|
<el-option label="每天" value="8" /> |
|
|
|
|
<el-option label="仅此一次" value="9" /> |
|
|
|
|
<el-form-item label="状态" prop="status"> |
|
|
|
|
<el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 240px" @change="handleStatusChangeFun"> |
|
|
|
|
<el-option label="所有" value="" /> |
|
|
|
|
<el-option label="开启" value="1" /> |
|
|
|
|
<el-option label="停止" value="0" /> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<!-- <el-form-item label="执行时间" prop="time">--> |
|
|
|
|
<!-- <el-select v-model="queryParams.time" placeholder="请选择" style="width: 240px">--> |
|
|
|
|
<!-- <el-option label="00:00-02:00" value="1" />--> |
|
|
|
|
<!-- <el-option label="02:00-03:00" value="2" />--> |
|
|
|
|
<!-- </el-select>--> |
|
|
|
|
<!-- </el-form-item>--> |
|
|
|
|
<el-form-item label="日期范围" style="width: 308px;"> |
|
|
|
|
<el-date-picker v-model="queryParams.dateRange" |
|
|
|
|
value-format="YYYY-MM-DD" |
|
|
|
|
@ -50,14 +38,21 @@ |
|
|
|
|
<div class="dev_control_table"> |
|
|
|
|
<el-table :data="timingList" height="685px"> |
|
|
|
|
<el-table-column label="序号" align="center" width="50"/> |
|
|
|
|
<el-table-column label="设备名称" align="center" prop="deviceId"/> |
|
|
|
|
<el-table-column label="设备名称" align="center" prop="deviceName"/> |
|
|
|
|
<el-table-column label="指令内容" align="center" prop="controlContext" width="500"/> |
|
|
|
|
<el-table-column label="状态" align="center"> |
|
|
|
|
<template v-slot="scope"> |
|
|
|
|
<!-- <el-tag class="ml-2" :type="timerStatus">暂停</el-tag>--> |
|
|
|
|
<el-tag class="ml-2" effect="dark" :type="scope.row.timerStatus == 0 ? 'info':'success'" disable-transitions>{{ scope.row.timerStatus == 0 ? '停止' : '开启' }}</el-tag> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="执行日期" align="center" prop="runday"/> |
|
|
|
|
<el-table-column label="执行时间" align="center" prop="runtime"/> |
|
|
|
|
<el-table-column label="创建时间" align="center" prop="createTime"/> |
|
|
|
|
<el-table-column label="创建者" align="center" prop="createBy"/> |
|
|
|
|
<el-table-column label="操作" align="center" prop="handle"> |
|
|
|
|
<el-table-column label="操作" align="center" prop="handle" width="200"> |
|
|
|
|
<template v-slot="scope"> |
|
|
|
|
<el-button size="small" :type="scope.row.timerStatus == 0 ? 'success':''" @click="getUpDateStatusFun(scope)">{{ scope.row.timerStatus == 0 ? '开启' : '停止' }}</el-button> |
|
|
|
|
<el-button type="danger" size="small" :icon="Delete" @click="getDeleteTimerFun(scope)">删除</el-button> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
@ -95,22 +90,48 @@ |
|
|
|
|
<el-input v-model="timingForm.content" placeholder="请输入指令内容"/> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
|
|
|
|
|
<el-col :span="24"> |
|
|
|
|
<el-form-item label="控制指令" prop="code"> |
|
|
|
|
<el-radio-group v-model="timingForm.checkedRadio" style="display: flex; flex-wrap: wrap;"> |
|
|
|
|
<div style="display: flex; margin-bottom: 10px; width: 100%"> |
|
|
|
|
<el-radio label="启" border/> |
|
|
|
|
<el-radio label="停" border/> |
|
|
|
|
</div> |
|
|
|
|
<div class="tempRadioBox"> |
|
|
|
|
<div class="tempRadio"> |
|
|
|
|
<el-radio v-model="timingForm.checkedRadio" class="radio" label="进水温度" border @change="radioChange"/> |
|
|
|
|
<el-input v-model="timingForm.inTemp" class="input"/> |
|
|
|
|
</div> |
|
|
|
|
<div class="tempRadio"> |
|
|
|
|
<el-radio v-model="timingForm.checkedRadio" class="radio" label="出水温度" border @change="radioChange"/> |
|
|
|
|
<el-input v-model="timingForm.outTemp" class="input"/> |
|
|
|
|
</div> |
|
|
|
|
<div class="tempRadio"> |
|
|
|
|
<el-radio v-model="timingForm.checkedRadio" class="radio" label="温度" border @change="radioChange"/> |
|
|
|
|
<el-input v-model="timingForm.temp" class="input"/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-radio-group> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
|
|
|
|
|
<el-col :span="24"> |
|
|
|
|
<el-form-item label="执行星期"> |
|
|
|
|
<el-form-item label="执行次数"> |
|
|
|
|
<el-radio-group v-model="timingForm.day"> |
|
|
|
|
<el-radio style='width:90px' label="每天" @change="handleEveryday"/> |
|
|
|
|
<el-radio label="每天" @change="handleEveryday"/> |
|
|
|
|
</el-radio-group> |
|
|
|
|
<div class="collapse"> |
|
|
|
|
<el-collapse v-model="activeName" accordion> |
|
|
|
|
<el-collapse-item title="星期几" name="1"> |
|
|
|
|
<el-checkbox-group v-model="timingForm.week"> |
|
|
|
|
<el-checkbox style='width:90px' label="1" key="1">星期一</el-checkbox> |
|
|
|
|
<el-checkbox style='width:90px' label="2" key="2">星期二</el-checkbox> |
|
|
|
|
<el-checkbox style='width:90px' label="3" key="3">星期三</el-checkbox> |
|
|
|
|
<el-checkbox style='width:90px' label="4" key="4">星期四</el-checkbox> |
|
|
|
|
<el-checkbox style='width:90px' label="5" key="5">星期五</el-checkbox> |
|
|
|
|
<el-checkbox style='width:90px' label="6" key="6">星期六</el-checkbox> |
|
|
|
|
<el-checkbox style='width:90px' label="7" key="7">星期日</el-checkbox> |
|
|
|
|
<el-checkbox style='width:90px' label="2" key="2">星期一</el-checkbox> |
|
|
|
|
<el-checkbox style='width:90px' label="3" key="3">星期二</el-checkbox> |
|
|
|
|
<el-checkbox style='width:90px' label="4" key="4">星期三</el-checkbox> |
|
|
|
|
<el-checkbox style='width:90px' label="5" key="5">星期四</el-checkbox> |
|
|
|
|
<el-checkbox style='width:90px' label="6" key="6">星期五</el-checkbox> |
|
|
|
|
<el-checkbox style='width:90px' label="7" key="7">星期六</el-checkbox> |
|
|
|
|
<el-checkbox style='width:90px' label="8" key="8">星期日</el-checkbox> |
|
|
|
|
</el-checkbox-group> |
|
|
|
|
</el-collapse-item> |
|
|
|
|
|
|
|
|
|
@ -140,10 +161,10 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script setup name="Index"> |
|
|
|
|
import {Delete} from '@element-plus/icons-vue' |
|
|
|
|
import {Delete,SwitchButton} from '@element-plus/icons-vue' |
|
|
|
|
import {ElMessage, ElMessageBox} from "element-plus"; |
|
|
|
|
import {ref,reactive,watch,onMounted} from "vue"; |
|
|
|
|
import { getList,getAddTimer,getDeleteTimer } from '@/api/control/timer' |
|
|
|
|
import {getList, getAddTimer, getDeleteTimer, getUpDateStatus} from '@/api/control/timer' |
|
|
|
|
import { getDevice } from '@/api/control/manual' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -181,9 +202,8 @@ const startDate = ref() |
|
|
|
|
const endDate = ref() |
|
|
|
|
const data = reactive({ |
|
|
|
|
queryParams: { |
|
|
|
|
devName:'', |
|
|
|
|
week: '', |
|
|
|
|
time: '', |
|
|
|
|
devName:'0', |
|
|
|
|
status: '', |
|
|
|
|
dateRange:[], |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
@ -194,6 +214,12 @@ const wacthSelectDate = watch(()=> data.queryParams.dateRange,(val) =>{ |
|
|
|
|
console.log(val[1]) |
|
|
|
|
endDate.value = val[1] |
|
|
|
|
}) |
|
|
|
|
//拿到选择的状态val |
|
|
|
|
const statusVal = ref() |
|
|
|
|
function handleStatusChangeFun(val){ |
|
|
|
|
console.log('状态id',val) |
|
|
|
|
statusVal.value = val |
|
|
|
|
} |
|
|
|
|
//搜索按钮 |
|
|
|
|
function handleQuery(){ |
|
|
|
|
getListFun() |
|
|
|
|
@ -206,6 +232,9 @@ function resetQuery(){ |
|
|
|
|
startDate.value = null; |
|
|
|
|
endDate.value = null; |
|
|
|
|
devId.value = null; |
|
|
|
|
data.queryParams.devName = '0' |
|
|
|
|
statusVal.value = '' |
|
|
|
|
console.log('重置后的状态值为',statusVal.value) |
|
|
|
|
getListFun() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -224,7 +253,7 @@ function getListFun(){ |
|
|
|
|
"timerId":null, |
|
|
|
|
"deviceId":devId.value, |
|
|
|
|
"controlContext":null, |
|
|
|
|
"timerStatus":null, |
|
|
|
|
"timerStatus":statusVal.value, |
|
|
|
|
"createStart":startDate.value, |
|
|
|
|
"createEnd": endDate.value, |
|
|
|
|
"pageNum": currentPage.value, |
|
|
|
|
@ -244,8 +273,29 @@ const handleCurrentChange = (val) => { |
|
|
|
|
getListFun() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//开启停止按钮 |
|
|
|
|
function getUpDateStatusFun(scope){ |
|
|
|
|
//scope.row.timerStatus取反，传入的值取反 |
|
|
|
|
scope.row.timerStatus = scope.row.timerStatus === 1 ? 0 : 1; |
|
|
|
|
getUpDateStatus(scope.row.timerId,scope.row.timerStatus).then((res)=>{ |
|
|
|
|
console.log(res) |
|
|
|
|
if(res.code == 200){ |
|
|
|
|
ElMessage({ |
|
|
|
|
type: 'success', |
|
|
|
|
message: res.msg, |
|
|
|
|
}) |
|
|
|
|
if(scope.row.timerStatus == 0){ |
|
|
|
|
scope.row.timerStatus = 1 |
|
|
|
|
}else{ |
|
|
|
|
scope.row.timerStatus = 0 |
|
|
|
|
} |
|
|
|
|
getListFun() |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
//删除定时任务 |
|
|
|
|
function getDeleteTimerFun(e){ |
|
|
|
|
console.log(e) |
|
|
|
|
ElMessageBox.confirm( |
|
|
|
|
'确定要删除此条定时任务吗？', |
|
|
|
|
'提示', |
|
|
|
|
@ -254,15 +304,14 @@ function getDeleteTimerFun(e){ |
|
|
|
|
cancelButtonText: '取消', |
|
|
|
|
type: 'warning', |
|
|
|
|
}).then(() => { |
|
|
|
|
console.log(e.row.deviceId) |
|
|
|
|
getDeleteTimer(e.row.deviceId).then((res)=>{ |
|
|
|
|
console.log(res) |
|
|
|
|
// if(res.code == 200){ |
|
|
|
|
// ElMessage({ |
|
|
|
|
// type: 'success', |
|
|
|
|
// message: '删除成功！', |
|
|
|
|
// }) |
|
|
|
|
// } |
|
|
|
|
getDeleteTimer(e.row.timerId).then((res)=>{ |
|
|
|
|
if(res.code == 200){ |
|
|
|
|
ElMessage({ |
|
|
|
|
type: 'success', |
|
|
|
|
message: '删除成功！', |
|
|
|
|
}) |
|
|
|
|
getListFun() |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}).catch(() => {}) |
|
|
|
|
} |
|
|
|
|
@ -280,6 +329,12 @@ const selectTimer = ref() |
|
|
|
|
const timingForm = reactive({ |
|
|
|
|
dev:'', |
|
|
|
|
content:'', |
|
|
|
|
intemp:'', |
|
|
|
|
outtemp:'', |
|
|
|
|
checkedRadio:'', |
|
|
|
|
inTemp:'', |
|
|
|
|
outTemp:'', |
|
|
|
|
temp:'', |
|
|
|
|
day:'', |
|
|
|
|
week:[], |
|
|
|
|
executeTime:'', |
|
|
|
|
@ -293,14 +348,66 @@ function handleDevChange(id){ |
|
|
|
|
const watchContent = watch(()=> timingForm.content,(val)=>{ |
|
|
|
|
console.log(val) |
|
|
|
|
}) |
|
|
|
|
//监听：选中的是哪个指令 |
|
|
|
|
const code = ref() |
|
|
|
|
const watchCode = watch(()=> timingForm.checkedRadio,(val)=>{ |
|
|
|
|
if(val == '启' || val == '停'){ |
|
|
|
|
timingForm.inTemp = '' |
|
|
|
|
timingForm.outTemp = '' |
|
|
|
|
timingForm.temp = '' |
|
|
|
|
code.value = 'startandstop' |
|
|
|
|
} |
|
|
|
|
if(val == '进水温度'){ |
|
|
|
|
timingForm.outTemp = '' |
|
|
|
|
timingForm.temp = '' |
|
|
|
|
code.value = 'inTemp' |
|
|
|
|
} |
|
|
|
|
if(val == '出水温度'){ |
|
|
|
|
timingForm.inTemp = '' |
|
|
|
|
timingForm.temp = '' |
|
|
|
|
code.value = 'outTemp' |
|
|
|
|
} |
|
|
|
|
if(val == '温度'){ |
|
|
|
|
timingForm.outTemp = '' |
|
|
|
|
timingForm.inTemp = '' |
|
|
|
|
code.value = 'temp' |
|
|
|
|
} |
|
|
|
|
console.log(code.value) |
|
|
|
|
}) |
|
|
|
|
//监听：输入的进水温度值 |
|
|
|
|
const tempValue = ref() |
|
|
|
|
const watchInTempValue = watch(()=>timingForm.inTemp,(val)=>{ |
|
|
|
|
tempValue.value = val |
|
|
|
|
console.log('进水温度',tempValue.value) |
|
|
|
|
}) |
|
|
|
|
//监听：输入的出水温度值 |
|
|
|
|
const watchOutTempValue = watch(()=>timingForm.outTemp,(val)=>{ |
|
|
|
|
tempValue.value = val |
|
|
|
|
console.log('出水温度',tempValue.value) |
|
|
|
|
}) |
|
|
|
|
//监听：输入的温度值 |
|
|
|
|
const watchTempValue = watch(()=>timingForm.temp,(val)=>{ |
|
|
|
|
tempValue.value = val |
|
|
|
|
console.log('温度',tempValue.value) |
|
|
|
|
}) |
|
|
|
|
//监听：选中每天 |
|
|
|
|
const runday = ref() |
|
|
|
|
const watchEveryDay = watch(()=>timingForm.day,(val)=>{ |
|
|
|
|
console.log(val) |
|
|
|
|
value1.value = ''; |
|
|
|
|
timingForm.week = []; |
|
|
|
|
runday.value = 0 |
|
|
|
|
}) |
|
|
|
|
//监听：勾选的星期 |
|
|
|
|
const watchWeek = watch(()=> timingForm.week,(val) => { |
|
|
|
|
console.log('监听勾选的星期',val) |
|
|
|
|
if(timingForm.week.length === 7){ |
|
|
|
|
timingForm.day = '每天'; |
|
|
|
|
}else if(timingForm.week.length < 7 && timingForm.week.length > 0){ |
|
|
|
|
timingForm.day = '' |
|
|
|
|
} |
|
|
|
|
let strNum = val.join(',') |
|
|
|
|
runday.value = strNum |
|
|
|
|
console.log('监听勾选的星期',runday.value) |
|
|
|
|
}) |
|
|
|
|
//监听：选择仅此一次将每天和星期几清空 |
|
|
|
|
const watchValue1 = watch(()=> value1.value,(val) => { |
|
|
|
|
@ -330,12 +437,6 @@ function getAllDev(){ |
|
|
|
|
devArr.value = res.data |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
//选中每天 |
|
|
|
|
function handleEveryday(){ |
|
|
|
|
console.log('点击每天') |
|
|
|
|
value1.value = ''; |
|
|
|
|
timingForm.week = []; |
|
|
|
|
} |
|
|
|
|
//新增按钮 |
|
|
|
|
function handleAdd() { |
|
|
|
|
open.value = true; |
|
|
|
|
@ -346,10 +447,10 @@ function submitForm() { |
|
|
|
|
open.value = false; |
|
|
|
|
getAddTimer({ |
|
|
|
|
"deviceId":devId.value, |
|
|
|
|
"controlKey":"intemp", |
|
|
|
|
"controlValue":timingForm.content, |
|
|
|
|
"controlKey":code.value, |
|
|
|
|
"controlValue":tempValue.value, |
|
|
|
|
"status":"0", |
|
|
|
|
"runday":selectDate.value, |
|
|
|
|
"runday":runday.value, |
|
|
|
|
"runtime":selectTimer.value |
|
|
|
|
}).then((res)=>{ |
|
|
|
|
if(res.code == 200){ |
|
|
|
|
@ -385,6 +486,38 @@ const { queryParams } = toRefs(data); |
|
|
|
|
} |
|
|
|
|
.collapse{ |
|
|
|
|
margin-bottom: -1px; |
|
|
|
|
} |
|
|
|
|
.tempInput{ |
|
|
|
|
width: 20%; |
|
|
|
|
background-color: #ddd; |
|
|
|
|
border-radius: 4px; |
|
|
|
|
} |
|
|
|
|
.tempRadioBox{ |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
width: 100%; |
|
|
|
|
.tempRadio{ |
|
|
|
|
display: flex; |
|
|
|
|
margin-right: 20px; |
|
|
|
|
&:nth-child(3){ |
|
|
|
|
margin-right: 0px; |
|
|
|
|
} |
|
|
|
|
.radio{ |
|
|
|
|
margin-right: 0px; |
|
|
|
|
border-top-right-radius: 0px; |
|
|
|
|
border-bottom-right-radius: 0px; |
|
|
|
|
padding-right: 2px; |
|
|
|
|
border-right: 0px; |
|
|
|
|
} |
|
|
|
|
.input{ |
|
|
|
|
width: 60px; |
|
|
|
|
height: 32px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
::v-deep .el-input__wrapper{ |
|
|
|
|
border-top-left-radius: 0px; |
|
|
|
|
border-bottom-left-radius: 0px; |
|
|
|
|
} |
|
|
|
|
::v-deep .el-button{ |
|
|
|
|
border-radius: 2px; |
|
|
|
|
@ -411,10 +544,12 @@ const { queryParams } = toRefs(data); |
|
|
|
|
display: inline-block; |
|
|
|
|
} |
|
|
|
|
::v-deep .el-input__inner{ |
|
|
|
|
color: #f3ffff !important; |
|
|
|
|
//color: #f3ffff !important; |
|
|
|
|
color: #606266 !important; |
|
|
|
|
} |
|
|
|
|
::v-deep .el-date-editor .el-range-input{ |
|
|
|
|
color: #f3ffff; |
|
|
|
|
//color: #f3ffff; |
|
|
|
|
color: #606266 !important; |
|
|
|
|
} |
|
|
|
|
::v-deep .el-scrollbar__wrap.el-scrollbar__wrap--hidden-default{ |
|
|
|
|
background-color: rgba(47,61,138); |
|
|
|
|
|
