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

<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
          <el-form-item label="有效星期" prop="week">
            <el-select v-model="queryParams.week" placeholder="请选择" style="width: 240px">
              <el-option label="无有效星期" value="null" />
              <el-option label="星期一" value="one" />
            </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="dateRange"
                            value-format="YYYY-MM-DD"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @click="seletDate"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
          </el-col>
        </el-row>
          <div class="dev_control_table">
            <el-table :data="timingList" height="500px">
              <el-table-column label="序号" align="center" width="50"/>
              <el-table-column label="指令内容" align="center" prop="controlValue" width="700"/>
              <el-table-column label="执行时间" align="center" prop="createTime"/>
              <el-table-column label="有效日期" align="center" prop="dateRange"/>
              <el-table-column label="有效星期" align="center" prop="week"/>
              <el-table-column label="操作" align="center" prop="handle">
                <template v-slot="scope">
                  <el-button type="danger" size="small" :icon="Delete">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[5, 10, 20, 50]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
          </div>
      </el-col>
    </el-row>



    <!-- 新增对话框 -->
    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form :model="timingForm"  ref="userRef" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="指令内容" prop="content">
              <el-input v-model="timingForm.content" placeholder="请输入指令内容" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="执行星期">
              <el-radio-group v-model="timingForm.day">
                <el-radio style='width:90px' label="每天" @change="handleEveryday"/>
              </el-radio-group>
              <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-group>
                </el-collapse-item>
              </el-collapse>

            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="执行时间" prop="executeTime">
              <el-time-picker v-model="timingForm.executeTime" placeholder="请选择执行时间" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Index">
import {Delete} from '@element-plus/icons-vue'
import {ref,reactive,watch,onMounted} from "vue";
import { getList } from '@/api/control/timer'


/** 页面加载时*/
onMounted(()=>{
  formattedDateFun()
  getListFun()
})


/** 格式化日期*/
const YYYYMMDD = ref();
const timer = ref()
function formattedDateFun(){
  let date = new Date()
  let year = date.getFullYear()
  let month = (date.getMonth()+1).toString().padStart(2, '0');
  let day = date.getDate().toString().padStart(2, '0');
  let hours = date.getHours()
  let minutes = date.getMinutes()
  let seconds = date.getSeconds()
  YYYYMMDD.value = `${year}-${month}-${day}`
  timer.value = `${hours}:${minutes}:${seconds}`
  console.log(YYYYMMDD.value)
  console.log(timer.value)
}



/** 筛选处理 */
//选择的日期
const dateRange = ref([]);
const startDate = ref()
const endDate = ref()
const wacthSelectDate = watch(()=> dateRange.value,(val) =>{
  console.log(val[0])
  startDate.value = val[0]
  console.log(val[1])
  endDate.value = val[1]
})
const data = reactive({
  queryParams: {
    week: '',
    time: '',
  }
});
//选择日期
function seletDate(){
  console.log('选择的日期',dateRange.value)
}
//搜索按钮
function handleQuery(){
  getListFun()
}
//重置按钮
function resetQuery(){
  dateRange.value = [];
  getListFun()
}


/** 数据表格处理 */
const timingList = ref([])
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref()
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

function getListFun(){
  getList({
    "timerId":null,
    "deviceId":null,
    "controlContext":null,
    "timerStatus":null,
    "createStart":startDate.value,
    "createEnd": endDate.value,
    "pageNum": currentPage.value,
    "pageSize": pageSize.value
  }).then((res)=>{
    total.value = res.total
    timingList.value = res.rows
  })
}

const handleSizeChange = (val) => {
  console.log(`${val}`)
}
const handleCurrentChange = (val) => {
  console.log(`${val}`)
}


/** 新增定时处理 */
const open = ref(false);
const title = ref();
const activeName = ref('1')
const timingForm = reactive({
  content:'',
  day:'',
  week:[],
  executeTime:'',
})
const watchWeek = watch(()=> timingForm.week,(val) => {
  console.log('监听勾选的星期',val)
  if(timingForm.week.length === 7){
    timingForm.day = '每天'
  }else{
    timingForm.day = ''
  }
})
// const watchTime = watch(()=> timingForm.executeTime, (val) => {
//   // console.log(val.toLocaleString())
//   let date = new Date(val)
//   let hours = date.getHours()
//   let minutes = date.getMinutes()
//   let seconds = date.getSeconds()
//   console.log(`${hours}:${minutes}:${seconds}`)
// })
function handleEveryday(){
  console.log('点击每天')
}


function handleAdd() {
  open.value = true;
  title.value = "新增定时任务";
};
function submitForm() {
  open.value = false;
};
function cancel() {
  open.value = false;
};





const { queryParams } = toRefs(data);
</script>

<style scoped lang="scss">
.dev_control_table{
  position: relative;
  width: 100%;
  min-height: 745px;
  background-color: #2F3D8A;
}

::v-deep .el-button{
  border-radius: 2px;
}
::v-deep .el-pagination{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
::v-deep .el-pagination__total{
  color: #f3ffff;
}
::v-deep .el-pagination__jump{
  color: #f3ffff;
}
::v-deep .el-pager{
  margin: 0 5px;
}
::v-deep .el-table .el-table__body-wrapper{
  background-color: #2F3D8A;
}
::v-deep .el-form-item__content{
  //display: flex;
}
::v-deep .el-input__inner{
  color: #f3ffff;
}
::v-deep .el-date-editor .el-range-input{
  color: #f3ffff;
}
::v-deep .el-scrollbar__wrap.el-scrollbar__wrap--hidden-default{
  background-color: rgba(47,61,138);
}
</style>