|
|
|
|
@ -16,7 +16,14 @@ |
|
|
|
|
</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="结束日期"></el-date-picker> |
|
|
|
|
<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> |
|
|
|
|
@ -31,8 +38,8 @@ |
|
|
|
|
<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="content" width="700"/> |
|
|
|
|
<el-table-column label="执行时间" align="center" prop="time"/> |
|
|
|
|
<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"> |
|
|
|
|
@ -49,7 +56,7 @@ |
|
|
|
|
:disabled="disabled" |
|
|
|
|
:background="background" |
|
|
|
|
layout="total, sizes, prev, pager, next, jumper" |
|
|
|
|
:total="timingList.length" |
|
|
|
|
:total="total" |
|
|
|
|
@size-change="handleSizeChange" |
|
|
|
|
@current-change="handleCurrentChange"/> |
|
|
|
|
</div> |
|
|
|
|
@ -107,46 +114,93 @@ |
|
|
|
|
|
|
|
|
|
<script setup name="Index"> |
|
|
|
|
import {Delete} from '@element-plus/icons-vue' |
|
|
|
|
import {ref,reactive,watch} from "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 = [] |
|
|
|
|
dateRange.value = []; |
|
|
|
|
getListFun() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** 数据表格处理 */ |
|
|
|
|
const timingList = reactive([ |
|
|
|
|
{ |
|
|
|
|
content:'11', |
|
|
|
|
time:'22', |
|
|
|
|
dateRange:'44', |
|
|
|
|
week:'55', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
content:'11', |
|
|
|
|
time:'22', |
|
|
|
|
dateRange:'44', |
|
|
|
|
week:'55', |
|
|
|
|
} |
|
|
|
|
]) |
|
|
|
|
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}`) |
|
|
|
|
} |
|
|
|
|
@ -236,5 +290,14 @@ const { queryParams } = toRefs(data); |
|
|
|
|
::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> |
|
|
|
|
|
|
|
|
|
|
