hwj_system
/
scmy
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

定时控制

Browse Source
master
wj 2 years ago
parent 107d09e506
commit 573e48e6dc
1 changed files with 169 additions and 111 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 280
      psdc-ui/src/views/control/timer/index.vue

280
psdc-ui/src/views/control/timer/index.vue
Unescape View File

@ -9,14 +9,14 @@
<el-option v-for="item in devArr" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" /> <el-option v-for="item in devArr" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <!-- <el-form-item label="状态" prop="status">-->
<el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 240px" @change="handleStatusChangeFun"> <!-- <el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 240px" @change="handleStatusChangeFun">-->
<el-option label="所有" value="" /> <!-- <el-option label="所有" value="" />-->
<el-option label="开启" value="1" /> <!-- <el-option label="开启" value="1" />-->
<el-option label="停止" value="0" /> <!-- <el-option label="停止" value="0" />-->
</el-select> <!-- </el-select>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="日期范围" style="width: 308px;"> <el-form-item label="创建日期" style="width: 308px;">
<el-date-picker v-model="queryParams.dateRange" <el-date-picker v-model="queryParams.dateRange"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
type="daterange" type="daterange"
@ -39,20 +39,20 @@
<el-table :data="timingList" height="685px"> <el-table :data="timingList" height="685px">
<el-table-column label="序号" align="center" width="50"/> <el-table-column label="序号" align="center" width="50"/>
<el-table-column label="设备名称" align="center" prop="deviceName"/> <el-table-column label="设备名称" align="center" prop="deviceName"/>
<el-table-column label="指令内容" align="center" prop="controlContext" width="500"/> <el-table-column label="任务描述" align="center" prop="controlContext" width="500"/>
<el-table-column label="状态" align="center"> <!-- <el-table-column label="状态" align="center">-->
<template v-slot="scope"> <!-- <template v-slot="scope">-->
<!-- <el-tag class="ml-2" :type="timerStatus">暂停</el-tag>--> <!--&lt;!&ndash; <el-tag class="ml-2" :type="timerStatus">暂停</el-tag>&ndash;&gt;-->
<el-tag class="ml-2" effect="dark" :type="scope.row.timerStatus == 0 ? 'info':'success'" disable-transitions>{{ scope.row.timerStatus == 0 ? '停止' : '开启' }}</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> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
<el-table-column label="执行日期" align="center" prop="runday"/> <el-table-column label="执行日期" align="center" prop="runday"/>
<el-table-column label="执行时间" align="center" prop="runtime"/> <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="createBy"/>
<el-table-column label="创建时间" align="center" prop="createTime"/>
<el-table-column label="操作" align="center" prop="handle" width="200"> <el-table-column label="操作" align="center" prop="handle" width="200">
<template v-slot="scope"> <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 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> <el-button type="danger" size="small" :icon="Delete" @click="getDeleteTimerFun(scope)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -86,32 +86,32 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="指令内容" prop="content"> <el-form-item label="任务描述" prop="content">
<el-input v-model="timingForm.content" placeholder="请输入指令内容"/> <el-input v-model="timingForm.controlContext" placeholder="请输入任务描述"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="控制指令" prop="code"> <el-form-item label="控制指令" prop="code">
<el-radio-group v-model="timingForm.checkedRadio" style="display: flex; flex-wrap: wrap;"> <el-radio-group v-model="timingForm.checkedRadio" @change="checkedRadio" style="display: flex; flex-wrap: wrap;">
<div style="display: flex; margin-bottom: 10px; width: 100%"> <div style="display: flex; margin-bottom: 10px; width: 100%">
<el-radio label="启" border/> <el-radio label="启" border/>
<el-radio label="停" border/> <el-radio label="停" border/>
</div> </div>
<div class="tempRadioBox"> <!-- <div class="tempRadioBox">-->
<div class="tempRadio"> <!-- <div class="tempRadio">-->
<el-radio v-model="timingForm.checkedRadio" class="radio" label="进水温度" border @change="radioChange"/> <!-- <el-radio v-model="timingForm.checkedRadio" class="radio" label="进水温度" border @change="radioChange"/>-->
<el-input v-model="timingForm.inTemp" class="input"/> <!-- <el-input v-model="timingForm.inTemp" class="input"/>-->
</div> <!-- </div>-->
<div class="tempRadio"> <!-- <div class="tempRadio">-->
<el-radio v-model="timingForm.checkedRadio" class="radio" label="出水温度" border @change="radioChange"/> <!-- <el-radio v-model="timingForm.checkedRadio" class="radio" label="出水温度" border @change="radioChange"/>-->
<el-input v-model="timingForm.outTemp" class="input"/> <!-- <el-input v-model="timingForm.outTemp" class="input"/>-->
</div> <!-- </div>-->
<div class="tempRadio"> <!-- <div class="tempRadio">-->
<el-radio v-model="timingForm.checkedRadio" class="radio" label="温度" border @change="radioChange"/> <!-- <el-radio v-model="timingForm.checkedRadio" class="radio" label="温度" border @change="radioChange"/>-->
<el-input v-model="timingForm.temp" class="input"/> <!-- <el-input v-model="timingForm.temp" class="input"/>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -124,14 +124,14 @@
<div class="collapse"> <div class="collapse">
<el-collapse v-model="activeName" accordion> <el-collapse v-model="activeName" accordion>
<el-collapse-item title="星期几" name="1"> <el-collapse-item title="星期几" name="1">
<el-checkbox-group v-model="timingForm.week"> <el-checkbox-group v-model="week" @change="handleCheckboxClick" >
<el-checkbox style='width:90px' label="2" key="2">星期一</el-checkbox> <el-checkbox style='width:90px' label="2">星期一</el-checkbox>
<el-checkbox style='width:90px' label="3" key="3">星期二</el-checkbox> <el-checkbox style='width:90px' label="3">星期二</el-checkbox>
<el-checkbox style='width:90px' label="4" key="4">星期三</el-checkbox> <el-checkbox style='width:90px' label="4">星期三</el-checkbox>
<el-checkbox style='width:90px' label="5" key="5">星期四</el-checkbox> <el-checkbox style='width:90px' label="5">星期四</el-checkbox>
<el-checkbox style='width:90px' label="6" key="6">星期五</el-checkbox> <el-checkbox style='width:90px' label="6">星期五</el-checkbox>
<el-checkbox style='width:90px' label="7" key="7">星期六</el-checkbox> <el-checkbox style='width:90px' label="7">星期六</el-checkbox>
<el-checkbox style='width:90px' label="8" key="8">星期日</el-checkbox> <el-checkbox style='width:90px' label="8">星期日</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-collapse-item> </el-collapse-item>
@ -163,7 +163,7 @@
<script setup name="Index"> <script setup name="Index">
import {Delete,SwitchButton} from '@element-plus/icons-vue' import {Delete,SwitchButton} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from "element-plus"; import {ElMessage, ElMessageBox} from "element-plus";
import {ref,reactive,watch,onMounted} from "vue"; import {ref, reactive, watch, onMounted, watchEffect} from "vue";
import {getList, getAddTimer, getDeleteTimer, getUpDateStatus} from '@/api/control/timer' import {getList, getAddTimer, getDeleteTimer, getUpDateStatus} from '@/api/control/timer'
import { getDevice } from '@/api/control/manual' import { getDevice } from '@/api/control/manual'
@ -248,6 +248,7 @@ const small = ref(false)
const background = ref(false) const background = ref(false)
const disabled = ref(false) const disabled = ref(false)
//获取表格信息
function getListFun(){ function getListFun(){
getList({ getList({
"timerId":null, "timerId":null,
@ -261,6 +262,45 @@ function getListFun(){
}).then((res)=>{ }).then((res)=>{
total.value = res.total total.value = res.total
timingList.value = res.rows timingList.value = res.rows
for(let i = 0;i < timingList.value.length;i++){
if(timingList.value[i].runday.length != 10){
let rundayArr = timingList.value[i].runday.split(','); // 将字符串拆成数组
let rundayStr = '';
for(let j = 0;j < rundayArr.length;j++){
switch(rundayArr[j]){
case '0':
rundayStr = '每天';
break;
case '1':
rundayStr += '星期一';
break;
case '2':
rundayStr += '星期二';
break;
case '3':
rundayStr += '星期三';
break;
case '4':
rundayStr += '星期四';
break;
case '5':
rundayStr += '星期五';
break;
case '6':
rundayStr += '星期六';
break;
case '7':
rundayStr += '星期日';
break;
}
if(j < rundayArr.length - 1){
rundayStr += ',';
}
}
timingList.value[i].runday = rundayStr;
}
}
}) })
} }
@ -274,26 +314,28 @@ const handleCurrentChange = (val) => {
} }
//开启停止按钮 //开启停止按钮
function getUpDateStatusFun(scope){ // function getUpDateStatusFun(scope){
//scope.row.timerStatus取反，传入的值取反 // //scope.row.timerStatus取反，传入的值取反
scope.row.timerStatus = scope.row.timerStatus === 1 ? 0 : 1; // scope.row.timerStatus = scope.row.timerStatus === 1 ? 0 : 1;
getUpDateStatus(scope.row.timerId,scope.row.timerStatus).then((res)=>{ // getUpDateStatus(scope.row.timerId,scope.row.timerStatus).then((res)=>{
console.log(res) // console.log(res)
if(res.code == 200){ // if(res.code == 200){
ElMessage({ // ElMessage({
type: 'success', // type: 'success',
message: res.msg, // message: res.msg,
}) // })
if(scope.row.timerStatus == 0){ // if(scope.row.timerStatus == 0){
scope.row.timerStatus = 1 // scope.row.timerStatus = 1
}else{ // }else{
scope.row.timerStatus = 0 // scope.row.timerStatus = 0
} // }
getListFun() // getListFun()
} // }
}) // })
} // }
//删除定时任务 //删除定时任务
//删除任务
function getDeleteTimerFun(e){ function getDeleteTimerFun(e){
console.log(e) console.log(e)
ElMessageBox.confirm( ElMessageBox.confirm(
@ -323,12 +365,10 @@ const title = ref();
const activeName = ref('1') const activeName = ref('1')
const value1 = ref('') const value1 = ref('')
const devArr = ref([]) const devArr = ref([])
const devId = ref()
const selectDate = ref() const selectDate = ref()
const selectTimer = ref()
const timingForm = reactive({ const timingForm = reactive({
dev:'', dev:'',
content:'', controlContext:'设备启停',
intemp:'', intemp:'',
outtemp:'', outtemp:'',
checkedRadio:'', checkedRadio:'',
@ -336,26 +376,35 @@ const timingForm = reactive({
outTemp:'', outTemp:'',
temp:'', temp:'',
day:'', day:'',
week:[],
executeTime:'', executeTime:'',
}) })
//拿到选择的设备id //拿到选择的设备id
const devId = ref()
function handleDevChange(id){ function handleDevChange(id){
devId.value = id devId.value = id
console.log('选择的设备id',devId.value) console.log('设备id：',devId.value)
} }
//监听：输入的指令内容 //监听：输入的任务描述
const watchContent = watch(()=> timingForm.content,(val)=>{ const watchContent = watch(()=> timingForm.content,(val)=>{
console.log(val) console.log(val)
}) })
//监听：选中的是哪个指令 //监听：选中的是哪个指令
const code = ref() const code = ref()
const codeValue = ref()
const watchCode = watch(()=> timingForm.checkedRadio,(val)=>{ const watchCode = watch(()=> timingForm.checkedRadio,(val)=>{
if(val == '启' || val == '停'){ if(val == '启'){
timingForm.inTemp = ''
timingForm.outTemp = ''
timingForm.temp = ''
code.value = 'startandstop'
codeValue.value = 1
}
if(val == '停'){
timingForm.inTemp = '' timingForm.inTemp = ''
timingForm.outTemp = '' timingForm.outTemp = ''
timingForm.temp = '' timingForm.temp = ''
code.value = 'startandstop' code.value = 'startandstop'
codeValue.value = 2
} }
if(val == '进水温度'){ if(val == '进水温度'){
timingForm.outTemp = '' timingForm.outTemp = ''
@ -372,43 +421,49 @@ const watchCode = watch(()=> timingForm.checkedRadio,(val)=>{
timingForm.inTemp = '' timingForm.inTemp = ''
code.value = 'temp' code.value = 'temp'
} }
console.log(code.value) console.log('控制指令：',code.value)
}) })
//监听：输入的进水温度值
const tempValue = ref() // //监听：输入的进水温度值
const watchInTempValue = watch(()=>timingForm.inTemp,(val)=>{ // const tempValue = ref()
tempValue.value = val // const watchInTempValue = watch(()=>timingForm.inTemp,(val)=>{
console.log('进水温度',tempValue.value) // tempValue.value = val
}) // console.log('进水温度',tempValue.value)
//监听：输入的出水温度值 // })
const watchOutTempValue = watch(()=>timingForm.outTemp,(val)=>{ // //监听：输入的出水温度值
tempValue.value = val // const watchOutTempValue = watch(()=>timingForm.outTemp,(val)=>{
console.log('出水温度',tempValue.value) // tempValue.value = val
}) // console.log('出水温度',tempValue.value)
//监听：输入的温度值 // })
const watchTempValue = watch(()=>timingForm.temp,(val)=>{ // //监听：输入的温度值
tempValue.value = val // const watchTempValue = watch(()=>timingForm.temp,(val)=>{
console.log('温度',tempValue.value) // tempValue.value = val
}) // console.log('温度',tempValue.value)
//监听：选中每天 // })
const runday = ref()
const watchEveryDay = watch(()=>timingForm.day,(val)=>{ //选中每天
console.log(val) function handleEveryday(val){
value1.value = ''; value1.value = '';
timingForm.week = []; week.value = [];
runday.value = 0 selectDate.value = 0
}) console.log('选择每天：',selectDate.value)
//监听：勾选的星期 }
const watchWeek = watch(()=> timingForm.week,(val) => {
if(timingForm.week.length === 7){ //勾选的星期
timingForm.day = '每天'; const week = ref([])
}else if(timingForm.week.length < 7 && timingForm.week.length > 0){ function handleCheckboxClick() {
timingForm.day = '' if(week.value.length === 7){
} timingForm.day = '每天';
let strNum = val.join(',') selectDate.value = 0
runday.value = strNum }else if(week.value.length < 7 && week.value.length > 0){
console.log('监听勾选的星期',runday.value) timingForm.day = '';
}) value1.value = '';
let strNum = week.value.join(',')
selectDate.value = strNum
}
console.log('选择星期：',selectDate.value)
}
//监听：选择仅此一次将每天和星期几清空 //监听：选择仅此一次将每天和星期几清空
const watchValue1 = watch(()=> value1.value,(val) => { const watchValue1 = watch(()=> value1.value,(val) => {
const date = new Date(val.toLocaleString()); const date = new Date(val.toLocaleString());
@ -416,20 +471,22 @@ const watchValue1 = watch(()=> value1.value,(val) => {
const month = (date.getMonth() + 1).toString().padStart(2, '0'); const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, '0');
selectDate.value = `${year}-${month}-${day}`; selectDate.value = `${year}-${month}-${day}`;
console.log('选择的日期',selectDate.value) console.log('选择日期：',selectDate.value)
if(value1.value != null){ if(value1.value != null){
timingForm.day = ''; timingForm.day = '';
timingForm.week = []; week.value = [];
} }
}) })
//监听：选择的执行时间 //监听：选择的执行时间
const selectTimer = ref()
const watchTime = watch(()=> timingForm.executeTime, (val) => { const watchTime = watch(()=> timingForm.executeTime, (val) => {
let date = new Date(val) let date = new Date(val)
let hours = date.getHours() let hours = date.getHours()
let minutes = date.getMinutes() let minutes = date.getMinutes()
let seconds = date.getSeconds() let seconds = date.getSeconds()
selectTimer.value = `${hours}:${minutes}:${seconds}` selectTimer.value = `${hours}:${minutes}:${seconds}`
console.log(selectTimer.value) console.log('选择时间：',selectTimer.value)
}) })
//获取所有设备 //获取所有设备
function getAllDev(){ function getAllDev(){
@ -448,9 +505,9 @@ function submitForm() {
getAddTimer({ getAddTimer({
"deviceId":devId.value, "deviceId":devId.value,
"controlKey":code.value, "controlKey":code.value,
"controlValue":tempValue.value, "controlValue":codeValue.value,
"status":"0", "status":null,
"runday":runday.value, "runday":selectDate.value,
"runtime":selectTimer.value "runtime":selectTimer.value
}).then((res)=>{ }).then((res)=>{
if(res.code == 200){ if(res.code == 200){
@ -458,6 +515,8 @@ function submitForm() {
message: res.msg, message: res.msg,
type: 'success', type: 'success',
}) })
devId.value = null;
getListFun()
} }
}) })
}; };
@ -469,7 +528,6 @@ function cancel() {
const { queryParams } = toRefs(data); const { queryParams } = toRefs(data);
</script> </script>

Write Preview
Loading…
Cancel
Save