Commit 2abdab67 authored by songrui's avatar songrui

Merge branch 'chronic-dev' of http://gitlab.yiboshi.com/nightkis1995/frontend-h5 into chronic-dev

parents cefb2d5c 4286a2bd
<template> <template>
<!-- 弹出层 --> <!-- 弹出层 -->
<van-popup v-model:show="data.isPicker" position="bottom" round @close="confirmOn"> <van-popup v-model:show='data.isPicker' position='bottom' round @close='confirmOn'>
<van-picker ref="picker" title="请选择时间" :columns="data.columns" @cancel="cancelOn" <van-picker ref='picker'
@confirm="onConfirm" v-model="data.selectedValues" /> title='请选择时间'
:columns='data.columns'
@cancel='cancelOn'
@confirm='onConfirm'
v-model='data.selectedValues'
:min-date='data.minDate'
:max-date='data.maxDate'
@change='changeTime'
/>
</van-popup> </van-popup>
</template> </template>
<script setup> <script setup>
import { reactive, watch, getCurrentInstance } from "vue"; import { reactive, watch, getCurrentInstance } from 'vue'
import dayjs from 'dayjs'
const customFieldName = { const customFieldName = {
text: "value", text: 'value',
value: "values", value: 'values',
children: "" children: ''
}; }
const data = reactive({ const data = reactive({
isPicker: false, //是否显示弹出层 isPicker: false, //是否显示弹出层
columns: [], //所有时间列 columns: [], //所有时间列
selectedValues: [], //控件选择的时间值 selectedValues: [], //控件选择的时间值
showType: [] //控制显示时间格式 年月日时分秒 showType: [], //控制显示时间格式 年月日时分秒
}); minDate: null,
maxDate: null,
})
const props = defineProps({ const props = defineProps({
// 传入的显影状态 // 传入的显影状态
...@@ -32,7 +43,7 @@ const props = defineProps({ ...@@ -32,7 +43,7 @@ const props = defineProps({
}, },
showType: { showType: {
type: Array, type: Array,
default:() => { default: () => {
return ['year', 'month', 'day', 'hour', 'minute', 'second'] return ['year', 'month', 'day', 'hour', 'minute', 'second']
} }
}, },
...@@ -42,180 +53,416 @@ const props = defineProps({ ...@@ -42,180 +53,416 @@ const props = defineProps({
maxDate: { maxDate: {
type: Date type: Date
} }
}); })
//定义要向父组件传递的事件 //定义要向父组件传递的事件
const emit = defineEmits(["changeValue", "confirm"]); const emit = defineEmits(['changeValue', 'confirm'])
watch( watch(
() => props.showPicker, () => props.showPicker,
val => { val => {
data.isPicker = val; data.isPicker = val
data.showType = props.showType data.showType = props.showType
data.columns = []; data.minDate = props.minDate
getcolumns(); data.maxDate = props.maxDate
data.columns = []
getcolumns()
}, },
{ {
immediate: true//立即监听--进入就会执行一次 监听显影状态 immediate: true//立即监听--进入就会执行一次 监听显影状态
} }
); )
function getcolumns() { function getcolumns() {
let strtime = props.values; //传入的时间 let strtime = props.values //传入的时间
//console.log(strtime); 2023-09-05 19:28:00 //console.log(strtime); 2023-09-05 19:28:00
let date = new Date(strtime.replace(/-/g, "/")); let date = new Date(strtime.replace(/-/g, '/'))
// console.log(date); Wed Aug 09 2023 14:53:15 GMT+0800 (中国标准时间) // console.log(date); Wed Aug 09 2023 14:53:15 GMT+0800 (中国标准时间)
let timeVaules = date.getTime(); let timeVaules = date.getTime()
let dateVaules; let dateVaules
if (props.values != "") { if (props.values != '') {
dateVaules = new Date(timeVaules); dateVaules = new Date(timeVaules)
} else { } else {
dateVaules = new Date(); //没有传入时间则默认当前时刻 dateVaules = new Date() //没有传入时间则默认当前时刻
} }
let Y = dateVaules.getFullYear(); let Y = dateVaules.getFullYear()
let M = dateVaules.getMonth(); let M = dateVaules.getMonth()
let D = dateVaules.getDate(); let D = dateVaules.getDate()
let h = dateVaules.getHours(); let h = dateVaules.getHours()
let m = dateVaules.getMinutes(); let m = dateVaules.getMinutes()
let s = dateVaules.getSeconds(); let s = dateVaules.getSeconds()
if(data.showType.includes('year')) { let minYear = data.minDate ? new Date(data.minDate).getFullYear() : null
let year = []; //获取前后十年数组 if (data.showType.includes('year')) {
year.values = []; let year = [] //获取前后十年数组
let Currentday = new Date().getFullYear(); year.values = []
let minYear = props.minDate ? props.minDate.getFullYear() : Currentday - 10; let Currentday = new Date().getFullYear()
let maxYear = props.maxDate ? props.maxDate.getFullYear() : Currentday + 10; let minYear = props.minDate ? props.minDate.getFullYear() : Currentday - 10
let maxYear = props.maxDate ? props.maxDate.getFullYear() : Currentday + 10
for (let i = minYear; i < maxYear; i++) { for (let i = minYear; i < maxYear; i++) {
year.push({ text: i.toString(), value: i }); year.push({ text: i.toString(), value: i })
} }
year.defaultIndex = year.values.indexOf(Y); //设置默认选项当前年 year.defaultIndex = year.values.indexOf(Y) //设置默认选项当前年
// 个位数补0 // 个位数补0
const _M = M < 10 ? `0${M + 1}` : M.toString(); //月份比实际获取的少1,所以要加1 const _M = M < 10 ? `0${M + 1}` : `${M + 1}`.toString() //月份比实际获取的少1,所以要加1
const _D = D < 10 ? `0${D}` : D.toString(); const _D = D < 10 ? `0${D}` : D.toString()
const _h = h < 10 ? `0${h}` : h.toString(); const _h = h < 10 ? `0${h}` : h.toString()
const _m = m < 10 ? `0${m}` : m.toString(); const _m = m < 10 ? `0${m}` : m.toString()
const _s = s < 10 ? `0${s}` : s.toString(); const _s = s < 10 ? `0${s}` : s.toString()
// 生成年月日时分秒时间值 // 生成年月日时分秒时间值
data.selectedValues.push(Y); data.selectedValues.push(Y)
data.selectedValues.push(_M); data.selectedValues.push(_M)
data.selectedValues.push(_D); data.selectedValues.push(_D)
data.selectedValues.push(_h); data.selectedValues.push(_h)
data.selectedValues.push(_m); data.selectedValues.push(_m)
data.selectedValues.push(_s); data.selectedValues.push(_s)
data.columns.push(year); //生成年列 data.columns.push(year) //生成年列
} }
if (data.showType.includes('month')) { if (data.showType.includes('month')) {
let month = []; //获取12月数组 let month = [] //获取12月数组
month = Object.keys(Array.apply(null, { length: 13 })).map(function (item) { let allMon = []
if (data.minDate && minYear == Y) {
let minMon = new Date(data.minDate).getMonth()
let allM = Object.keys(Array.apply(null, { length: 13 }))
allMon = allM.filter(item => item >= minMon)
} else {
allMon = Object.keys(Array.apply(null, { length: 13 }))
}
month = allMon.map(function(item) {
if (+item + 1 <= 10) { if (+item + 1 <= 10) {
return { text: "0" + item, value: "0" + item }; return { text: '0' + item, value: '0' + item }
} else if (+item + 1 == 11) { } else if (+item + 1 == 11) {
return { text: +item, value: +item }; return { text: +item, value: +item }
} else { } else {
return { return {
text: (+item + 0).toString(), text: (+item + 0).toString(),
value: (+item + 0).toString() value: (+item + 0).toString()
};
} }
}); }
month.splice(0, 1); })
data.columns.push(month); //生成月列 month.splice(0, 1)
data.columns.push(month) //生成月列
} }
if (data.showType.includes('day')) { if (data.showType.includes('day')) {
//获取当月的天数 //获取当月的天数
let days = getCountDays(Y, M + 1); let days = getCountDays(Y, M + 1)
let day = []; //创建当月天数数组 let day = [] //创建当月天数数组
day = Object.keys(Array.apply(null, { length: days + 1 })).map(function ( let allDays = []
item if (data.minDate && minYear == Y) {
) { let minDay = new Date(data.minDate).getDate()
let allD = Object.keys(Array.apply(null, { length: days + 1 }))
allDays = allD.filter(item => item >= minDay)
} else {
allDays = Object.keys(Array.apply(null, { length: days + 1 }))
}
day = allDays.map(function(item) {
if (+item + 1 <= 10) { if (+item + 1 <= 10) {
return { text: "0" + item, value: "0" + item }; return { text: '0' + item, value: '0' + item }
} else if (+item + 1 == 11) { } else if (+item + 1 == 11) {
return { text: +item, value: +item }; return { text: +item, value: +item }
} else { } else {
return { return {
text: (+item + 0).toString(), text: (+item + 0).toString(),
value: (+item + 0).toString() value: (+item + 0).toString()
};
} }
}); }
day.splice(0, 1); })
data.columns.push(day); //生成日列 day.splice(0, 1)
data.columns.push(day) //生成日列
} }
if (data.showType.includes('hour')) { if (data.showType.includes('hour')) {
let hour = []; //创建小时数组 let hour = [] //创建小时数组
hour = Object.keys(Array.apply(null, { length: 24 })).map(function (item) { let allHour = []
if (data.minDate && minYear == Y) {
let minHour = new Date(data.minDate).getHours() ? new Date(data.minDate).getHours(): new Date().getHours()
let allH = Object.keys(Array.apply(null, { length: 24 }))
allHour = allH.filter(item => item >= minHour)
} else {
allHour = Object.keys(Array.apply(null, { length: 24 }))
}
hour = allHour.map(function(item) {
if (+item + 1 <= 10) { if (+item + 1 <= 10) {
return { text: "0" + item, value: "0" + item }; return { text: '0' + item, value: '0' + item }
} else if (+item + 1 == 11) { } else if (+item + 1 == 11) {
return { text: +item, value: +item }; return { text: +item, value: +item }
} else { } else {
return { return {
text: (+item + 0).toString(), text: (+item + 0).toString(),
value: (+item + 0).toString() value: (+item + 0).toString()
};
} }
}); }
data.columns.push(hour); //生成小时列 })
data.columns.push(hour) //生成小时列
} }
if (data.showType.includes('minute')) { if (data.showType.includes('minute')) {
let mi = []; //创建分钟数组 let mi = [] //创建分钟数组
mi = Object.keys(Array.apply(null, { length: 60 })).map(function (item) { let allMi = []
if (data.minDate && minYear == Y) {
let minMi = new Date(data.minDate).getMinutes() ? new Date(data.minDate).getMinutes() : new Date().getMinutes()
let allM = Object.keys(Array.apply(null, { length: 60 }))
allMi = allM.filter(item => item >= minMi)
} else {
allMi = Object.keys(Array.apply(null, { length: 60 }))
}
mi = allMi.map(function(item) {
if (+item + 1 <= 10) { if (+item + 1 <= 10) {
return { text: "0" + item, value: "0" + item }; return { text: '0' + item, value: '0' + item }
} else if (+item + 1 == 11) { } else if (+item + 1 == 11) {
return { text: +item, value: +item }; return { text: +item, value: +item }
} else { } else {
return { return {
text: (+item + 0).toString(), text: (+item + 0).toString(),
value: (+item + 0).toString() value: (+item + 0).toString()
};
} }
}); }
data.columns.push(mi);//生成分钟列 })
data.columns.push(mi)//生成分钟列
} }
if (data.showType.includes('second')) { if (data.showType.includes('second')) {
let ss = []; //创建秒数数组 let ss = [] //创建秒数数组
ss = Object.keys(Array.apply(null, { length: 60 })).map(function (item) { let allSS = []
if (data.minDate && minYear == Y) {
let minSS = new Date(data.minDate).getSeconds() ? new Date(data.minDate).getSeconds() : new Date().getSeconds()
let allS = Object.keys(Array.apply(null, { length: 60 }))
allSS = allS.filter(item => item >= minSS)
} else {
allSS = Object.keys(Array.apply(null, { length: 60 }))
}
ss = allSS.map(function(item) {
if (+item + 1 <= 10) { if (+item + 1 <= 10) {
return { text: "0" + item, value: "0" + item }; return { text: '0' + item, value: '0' + item }
} else if (+item + 1 == 11) { } else if (+item + 1 == 11) {
return { text: +item, value: +item }; return { text: +item, value: +item }
} else { } else {
return { return {
text: (+item + 0).toString(), text: (+item + 0).toString(),
value: (+item + 0).toString() value: (+item + 0).toString()
};
} }
}); }
data.columns.push(ss);//生成秒钟列 })
data.columns.push(ss)//生成秒钟列
} }
} }
function getCountDays(year, month) { function getCountDays(year, month) {
//获取某年某月多少天 //获取某年某月多少天
let day = new Date(year, month, 0); let day = new Date(year, month, 0)
return day.getDate(); return day.getDate()
} }
// 关闭弹框 // 关闭弹框
function confirmOn() { function confirmOn() {
emit("changeValue"); emit('changeValue')
}
function changeTime() {
if (data.selectedValues && data.selectedValues.length) {
//存在最小时间时触发
if (props.minDate) {
let endval =
data.selectedValues[0] +
'-' +
data.selectedValues[1] +
'-' +
data.selectedValues[2] +
' ' +
data.selectedValues[3] +
':' +
data.selectedValues[4] +
':' +
data.selectedValues[5]
let selectAll = dayjs(endval).format('YYYY-MM-DD HH:mm:ss')
changeColumns(selectAll)
}
}
} }
function changeColumns(val) {
data.columns = []
let strtime = val //传入的时间
let date = new Date(strtime.replace(/-/g, '/'))
let timeVaules = date.getTime()
let dateVaules = new Date(timeVaules)
let Y = dateVaules.getFullYear()
let M = dateVaules.getMonth()
let D = dateVaules.getDate()
let h = dateVaules.getHours()
let m = dateVaules.getMinutes()
let s = dateVaules.getSeconds()
let minYear = data.minDate ? new Date(data.minDate).getFullYear() : null
if (data.showType.includes('year')) {
let year = [] //获取前后十年数组
year.values = []
let Currentday = new Date().getFullYear()
let minYear = props.minDate ? props.minDate.getFullYear() : Currentday - 10
let maxYear = props.maxDate ? props.maxDate.getFullYear() : Currentday + 10
for (let i = minYear; i < maxYear; i++) {
year.push({ text: i.toString(), value: i })
}
year.defaultIndex = year.values.indexOf(Y) //设置默认选项当前年
// 个位数补0
const _M = M < 10 ? `0${M + 1}` : `${M + 1}`.toString() //月份比实际获取的少1,所以要加1
const _D = D < 10 ? `0${D}` : D.toString()
const _h = h < 10 ? `0${h}` : h.toString()
const _m = m < 10 ? `0${m}` : m.toString()
const _s = s < 10 ? `0${s}` : s.toString()
// 生成年月日时分秒时间值
data.selectedValues.push(Y)
data.selectedValues.push(_M)
data.selectedValues.push(_D)
data.selectedValues.push(_h)
data.selectedValues.push(_m)
data.selectedValues.push(_s)
data.columns.push(year) //生成年列
}
if (data.showType.includes('month')) {
let month = [] //获取12月数组
let allMon = []
if (data.minDate && minYear == Y) {
let minMon = new Date(data.minDate).getMonth()
let allM = Object.keys(Array.apply(null, { length: 13 }))
allMon = allM.filter(item => item >= minMon)
} else {
allMon = Object.keys(Array.apply(null, { length: 13 }))
}
month = allMon.map(function(item) {
if (+item + 1 <= 10) {
return { text: '0' + item, value: '0' + item }
} else if (+item + 1 == 11) {
return { text: +item, value: +item }
} else {
return {
text: (+item + 0).toString(),
value: (+item + 0).toString()
}
}
})
month.splice(0, 1)
data.columns.push(month) //生成月列
}
if (data.showType.includes('day')) {
//获取当月的天数
let days = getCountDays(Y, M + 1)
let day = [] //创建当月天数数组
let allDays = []
if (data.minDate && minYear == Y) {
let minDay = new Date(data.minDate).getDate()
let allD = Object.keys(Array.apply(null, { length: days + 1 }))
allDays = allD.filter(item => item >= minDay)
} else {
allDays = Object.keys(Array.apply(null, { length: days + 1 }))
}
day = allDays.map(function(item) {
if (+item + 1 <= 10) {
return { text: '0' + item, value: '0' + item }
} else if (+item + 1 == 11) {
return { text: +item, value: +item }
} else {
return {
text: (+item + 0).toString(),
value: (+item + 0).toString()
}
}
})
day.splice(0, 1)
data.columns.push(day) //生成日列
}
if (data.showType.includes('hour')) {
let hour = [] //创建小时数组
let allHour = []
if (data.minDate && minYear == Y) {
let minHour = new Date(data.minDate).getHours() ? new Date(data.minDate).getHours(): new Date().getHours()
let allH = Object.keys(Array.apply(null, { length: 24 }))
allHour = allH.filter(item => item >= minHour)
} else {
allHour = Object.keys(Array.apply(null, { length: 24 }))
}
hour = allHour.map(function(item) {
if (+item + 1 <= 10) {
return { text: '0' + item, value: '0' + item }
} else if (+item + 1 == 11) {
return { text: +item, value: +item }
} else {
return {
text: (+item + 0).toString(),
value: (+item + 0).toString()
}
}
})
data.columns.push(hour) //生成小时列
}
if (data.showType.includes('minute')) {
let mi = [] //创建分钟数组
let allMi = []
if (data.minDate && minYear == Y) {
let minMi = new Date(data.minDate).getMinutes() ? new Date(data.minDate).getMinutes() : new Date().getMinutes()
let allM = Object.keys(Array.apply(null, { length: 60 }))
allMi = allM.filter(item => item >= minMi)
} else {
allMi = Object.keys(Array.apply(null, { length: 60 }))
}
mi = allMi.map(function(item) {
if (+item + 1 <= 10) {
return { text: '0' + item, value: '0' + item }
} else if (+item + 1 == 11) {
return { text: +item, value: +item }
} else {
return {
text: (+item + 0).toString(),
value: (+item + 0).toString()
}
}
})
data.columns.push(mi)//生成分钟列
}
if (data.showType.includes('second')) {
let ss = [] //创建秒数数组
let allSS = []
if (data.minDate && minYear == Y) {
let minSS = new Date(data.minDate).getSeconds() ? new Date(data.minDate).getSeconds() : new Date().getSeconds()
let allS = Object.keys(Array.apply(null, { length: 60 }))
allSS = allS.filter(item => item >= minSS)
} else {
allSS = Object.keys(Array.apply(null, { length: 60 }))
}
ss = allSS.map(function(item) {
if (+item + 1 <= 10) {
return { text: '0' + item, value: '0' + item }
} else if (+item + 1 == 11) {
return { text: +item, value: +item }
} else {
return {
text: (+item + 0).toString(),
value: (+item + 0).toString()
}
}
})
data.columns.push(ss)//生成秒钟列
}
}
//时间选择器关闭 值不改变并关闭弹框 //时间选择器关闭 值不改变并关闭弹框
function cancelOn({ selectedValues }) { function cancelOn({ selectedValues }) {
...@@ -226,19 +473,19 @@ function cancelOn({ selectedValues }) { ...@@ -226,19 +473,19 @@ function cancelOn({ selectedValues }) {
function onConfirm({ selectedValues }) { function onConfirm({ selectedValues }) {
let endval = let endval =
selectedValues[0] + selectedValues[0] +
"-" + '-' +
selectedValues[1] + selectedValues[1] +
"-" + '-' +
selectedValues[2] + selectedValues[2] +
" " + ' ' +
selectedValues[3] + selectedValues[3] +
":" + ':' +
selectedValues[4] + selectedValues[4] +
":" + ':' +
selectedValues[5]; selectedValues[5]
confirmOn() confirmOn()
emit("confirm", endval); emit('confirm', endval)
} }
</script> </script>
...@@ -366,6 +366,7 @@ export default { ...@@ -366,6 +366,7 @@ export default {
//催检日期选择 //催检日期选择
timeConfirm1(selectedValues) { timeConfirm1(selectedValues) {
this.form.screenTime = dayjs(selectedValues).format('YYYY-MM-DD HH:00:00') this.form.screenTime = dayjs(selectedValues).format('YYYY-MM-DD HH:00:00')
this.startTime = dayjs(selectedValues).format('YYYY-MM-DD HH:00:00')
this.showTime1 = false this.showTime1 = false
}, },
toShowTem(val) { toShowTem(val) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment