定时控制

psdc-ui/src/views/control/timer/index.vue

@@ -9,14 +9,14 @@
               <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="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="日期范围" style="width: 308px;">
+<!--          <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="创建日期" style="width: 308px;">
             <el-date-picker v-model="queryParams.dateRange"
                             value-format="YYYY-MM-DD"
                             type="daterange"
@@ -39,20 +39,20 @@
             <el-table :data="timingList" height="685px">
               <el-table-column label="序号" align="center" width="50"/>
               <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="controlContext" width="500"/>
+<!--              <el-table-column label="状态" align="center">-->
+<!--                <template v-slot="scope">-->
+<!--&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>-->
+<!--                </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="createTime"/>
               <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 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>
@@ -86,32 +86,32 @@
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="指令内容" prop="content">
-              <el-input v-model="timingForm.content" placeholder="请输入指令内容"/>
+            <el-form-item label="任务描述" prop="content">
+              <el-input v-model="timingForm.controlContext" 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;">
+              <el-radio-group v-model="timingForm.checkedRadio" @change="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>
+<!--                <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>
@@ -124,14 +124,14 @@
               <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="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 v-model="week" @change="handleCheckboxClick" >
+                      <el-checkbox style='width:90px' label="2">星期一</el-checkbox>
+                      <el-checkbox style='width:90px' label="3">星期二</el-checkbox>
+                      <el-checkbox style='width:90px' label="4">星期三</el-checkbox>
+                      <el-checkbox style='width:90px' label="5">星期四</el-checkbox>
+                      <el-checkbox style='width:90px' label="6">星期五</el-checkbox>
+                      <el-checkbox style='width:90px' label="7">星期六</el-checkbox>
+                      <el-checkbox style='width:90px' label="8">星期日</el-checkbox>
                     </el-checkbox-group>
                   </el-collapse-item>
 
@@ -163,7 +163,7 @@
 <script setup name="Index">
 import {Delete,SwitchButton} from '@element-plus/icons-vue'
 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 { getDevice } from '@/api/control/manual'
 
@@ -248,6 +248,7 @@ const small = ref(false)
 const background = ref(false)
 const disabled = ref(false)
 
+//获取表格信息
 function getListFun(){
   getList({
     "timerId":null,
@@ -261,6 +262,45 @@ function getListFun(){
   }).then((res)=>{
     total.value = res.total
     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){
-  //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 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(
@@ -323,12 +365,10 @@ const title = ref();
 const activeName = ref('1')
 const value1 = ref('')
 const devArr = ref([])
-const devId = ref()
 const selectDate = ref()
-const selectTimer = ref()
 const timingForm = reactive({
   dev:'',
-  content:'',
+  controlContext:'设备启停',
   intemp:'',
   outtemp:'',
   checkedRadio:'',
@@ -336,26 +376,35 @@ const timingForm = reactive({
   outTemp:'',
   temp:'',
   day:'',
-  week:[],
   executeTime:'',
 })
 //拿到选择的设备id
+const devId = ref()
 function handleDevChange(id){
   devId.value = id
-  console.log('选择的设备id',devId.value)
+  console.log('设备id：',devId.value)
 }
-//监听：输入的指令内容
+//监听：输入的任务描述
 const watchContent = watch(()=> timingForm.content,(val)=>{
   console.log(val)
 })
 //监听：选中的是哪个指令
 const code = ref()
+const codeValue = ref()
 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.outTemp = ''
     timingForm.temp = ''
     code.value = 'startandstop'
+    codeValue.value = 2
   }
   if(val == '进水温度'){
     timingForm.outTemp = ''
@@ -372,43 +421,49 @@ const watchCode = watch(()=> timingForm.checkedRadio,(val)=>{
     timingForm.inTemp = ''
     code.value = 'temp'
   }
-  console.log(code.value)
+  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)
+
+// //监听：输入的进水温度值
+// 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)
+// })
+
+//选中每天
+function handleEveryday(val){
   value1.value = '';
-  timingForm.week = [];
-  runday.value = 0
-})
-//监听：勾选的星期
-const watchWeek = watch(()=> timingForm.week,(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)
-})
+  week.value = [];
+  selectDate.value = 0
+  console.log('选择每天：',selectDate.value)
+}
+
+//勾选的星期
+const week = ref([])
+function handleCheckboxClick() {
+  if(week.value.length === 7){
+      timingForm.day = '每天';
+      selectDate.value = 0
+    }else if(week.value.length < 7 && week.value.length > 0){
+      timingForm.day = '';
+      value1.value = '';
+      let strNum = week.value.join(',')
+      selectDate.value = strNum
+    }
+  console.log('选择星期：',selectDate.value)
+}
+
 //监听：选择仅此一次将每天和星期几清空
 const watchValue1 = watch(()=> value1.value,(val) => {
   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 day = date.getDate().toString().padStart(2, '0');
   selectDate.value = `${year}-${month}-${day}`;
-  console.log('选择的日期',selectDate.value)
+  console.log('选择日期：',selectDate.value)
   if(value1.value != null){
     timingForm.day = '';
-    timingForm.week = [];
+    week.value = [];
   }
 })
+
 //监听：选择的执行时间
+const selectTimer = ref()
 const watchTime = watch(()=> timingForm.executeTime, (val) => {
   let date = new Date(val)
   let hours = date.getHours()
   let minutes = date.getMinutes()
   let seconds = date.getSeconds()
   selectTimer.value = `${hours}:${minutes}:${seconds}`
-  console.log(selectTimer.value)
+  console.log('选择时间：',selectTimer.value)
 })
 //获取所有设备
 function getAllDev(){
@@ -448,9 +505,9 @@ function submitForm() {
   getAddTimer({
     "deviceId":devId.value,
     "controlKey":code.value,
-    "controlValue":tempValue.value,
-    "status":"0",
-    "runday":runday.value,
+    "controlValue":codeValue.value,
+    "status":null,
+    "runday":selectDate.value,
     "runtime":selectTimer.value
   }).then((res)=>{
     if(res.code == 200){
@@ -458,6 +515,8 @@ function submitForm() {
         message: res.msg,
         type: 'success',
       })
+      devId.value = null;
+      getListFun()
     }
   })
 };
@@ -469,7 +528,6 @@ function cancel() {
 
 
 
-
 const { queryParams } = toRefs(data);
 </script>