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>
<!-- 弹出层 -->
<van-popup v-model:show="data.isPicker" position="bottom" round @close="confirmOn">
<van-picker ref="picker" title="请选择时间" :columns="data.columns" @cancel="cancelOn"
@confirm="onConfirm" v-model="data.selectedValues" />
<van-popup v-model:show='data.isPicker' position='bottom' round @close='confirmOn'>
<van-picker ref='picker'
title='请选择时间'
:columns='data.columns'
@cancel='cancelOn'
@confirm='onConfirm'
v-model='data.selectedValues'
:min-date='data.minDate'
:max-date='data.maxDate'
@change='changeTime'
/>
</van-popup>
</template>
<script setup>
import { reactive, watch, getCurrentInstance } from "vue";
import { reactive, watch, getCurrentInstance } from 'vue'
import dayjs from 'dayjs'
const customFieldName = {
text: "value",
value: "values",
children: ""
};
text: 'value',
value: 'values',
children: ''
}
const data = reactive({
isPicker: false, //是否显示弹出层
columns: [], //所有时间列
selectedValues: [], //控件选择的时间值
showType: [] //控制显示时间格式 年月日时分秒
});
showType: [], //控制显示时间格式 年月日时分秒
minDate: null,
maxDate: null,
})
const props = defineProps({
// 传入的显影状态
......@@ -32,7 +43,7 @@ const props = defineProps({
},
showType: {
type: Array,
default:() => {
default: () => {
return ['year', 'month', 'day', 'hour', 'minute', 'second']
}
},
......@@ -42,180 +53,416 @@ const props = defineProps({
maxDate: {
type: Date
}
});
})
//定义要向父组件传递的事件
const emit = defineEmits(["changeValue", "confirm"]);
const emit = defineEmits(['changeValue', 'confirm'])
watch(
() => props.showPicker,
val => {
data.isPicker = val;
data.isPicker = val
data.showType = props.showType
data.columns = [];
getcolumns();
data.minDate = props.minDate
data.maxDate = props.maxDate
data.columns = []
getcolumns()
},
{
immediate: true//立即监听--进入就会执行一次 监听显影状态
}
);
)
function getcolumns() {
let strtime = props.values; //传入的时间
let strtime = props.values //传入的时间
//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 (中国标准时间)
let timeVaules = date.getTime();
let timeVaules = date.getTime()
let dateVaules;
if (props.values != "") {
dateVaules = new Date(timeVaules);
let dateVaules
if (props.values != '') {
dateVaules = new Date(timeVaules)
} else {
dateVaules = new Date(); //没有传入时间则默认当前时刻
}
let Y = dateVaules.getFullYear();
let M = dateVaules.getMonth();
let D = dateVaules.getDate();
let h = dateVaules.getHours();
let m = dateVaules.getMinutes();
let s = dateVaules.getSeconds();
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.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月数组
month = Object.keys(Array.apply(null, { length: 13 })).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 = []; //创建当月天数数组
day = Object.keys(Array.apply(null, { length: days + 1 })).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); //生成日列
}
dateVaules = new Date() //没有传入时间则默认当前时刻
}
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 = []; //创建小时数组
hour = Object.keys(Array.apply(null, { length: 24 })).map(function (item) {
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 };
return { text: '0' + item, value: '0' + item }
} else if (+item + 1 == 11) {
return { text: +item, value: +item };
return { text: +item, value: +item }
} else {
return {
text: (+item + 0).toString(),
value: (+item + 0).toString()
};
}
}
});
data.columns.push(hour); //生成小时列
})
data.columns.push(hour) //生成小时列
}
if (data.showType.includes('minute')) {
let mi = []; //创建分钟数组
mi = Object.keys(Array.apply(null, { length: 60 })).map(function (item) {
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 };
return { text: '0' + item, value: '0' + item }
} else if (+item + 1 == 11) {
return { text: +item, value: +item };
return { text: +item, value: +item }
} else {
return {
text: (+item + 0).toString(),
value: (+item + 0).toString()
};
}
}
});
data.columns.push(mi);//生成分钟列
})
data.columns.push(mi)//生成分钟列
}
if (data.showType.includes('second')) {
let ss = []; //创建秒数数组
ss = Object.keys(Array.apply(null, { length: 60 })).map(function (item) {
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 };
return { text: '0' + item, value: '0' + item }
} else if (+item + 1 == 11) {
return { text: +item, value: +item };
return { text: +item, value: +item }
} else {
return {
text: (+item + 0).toString(),
value: (+item + 0).toString()
};
}
}
});
data.columns.push(ss);//生成秒钟列
})
data.columns.push(ss)//生成秒钟列
}
}
function getCountDays(year, month) {
//获取某年某月多少天
let day = new Date(year, month, 0);
return day.getDate();
let day = new Date(year, month, 0)
return day.getDate()
}
// 关闭弹框
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 }) {
......@@ -226,19 +473,19 @@ function cancelOn({ selectedValues }) {
function onConfirm({ selectedValues }) {
let endval =
selectedValues[0] +
"-" +
'-' +
selectedValues[1] +
"-" +
'-' +
selectedValues[2] +
" " +
' ' +
selectedValues[3] +
":" +
':' +
selectedValues[4] +
":" +
selectedValues[5];
':' +
selectedValues[5]
confirmOn()
emit("confirm", endval);
emit('confirm', endval)
}
</script>
......@@ -366,6 +366,7 @@ export default {
//催检日期选择
timeConfirm1(selectedValues) {
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
},
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