15 changed files with 1457 additions and 789 deletions
@ -1,21 +1,41 @@ |
|||||
module.exports = { |
module.exports = { |
||||
"env": { |
env: { |
||||
"browser": true, |
browser: true, |
||||
"es2021": true |
es2021: true, |
||||
}, |
}, |
||||
"extends": [ |
extends: [ |
||||
"plugin:vue/essential", |
'plugin:vue/essential', |
||||
"airbnb-base" |
'airbnb-base', |
||||
|
], |
||||
|
parserOptions: { |
||||
|
ecmaVersion: 13, |
||||
|
parser: '@typescript-eslint/parser', |
||||
|
sourceType: 'module', |
||||
|
}, |
||||
|
plugins: [ |
||||
|
'vue', |
||||
|
'@typescript-eslint', |
||||
|
], |
||||
|
rules: { |
||||
|
'vue/html-self-closing': 'off', |
||||
|
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', |
||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', |
||||
|
'no-param-reassign': 'off', |
||||
|
'max-len': ['error', { code: 140, tabWidth: 2 }], |
||||
|
'object-curly-newline': ['error', { multiline: true }], |
||||
|
'arrow-parens': ['error', 'as-needed'], |
||||
|
'linebreak-style': 'off', |
||||
|
'vue/attributes-order': 'off', |
||||
|
'vue/singleline-html-element-content-newline': 'off', |
||||
|
'vue/max-attributes-per-line': 'off', |
||||
|
'vue/multiline-html-element-content-newline': 'off', |
||||
|
'vue/html-indent': 'off', |
||||
|
'vue/html-closing-bracket-newline': [ |
||||
|
'error', |
||||
|
{ |
||||
|
singleline: 'never', |
||||
|
multiline: 'always', |
||||
|
}, |
||||
], |
], |
||||
"parserOptions": { |
}, |
||||
"ecmaVersion": 13, |
|
||||
"parser": "@typescript-eslint/parser", |
|
||||
"sourceType": "module" |
|
||||
}, |
|
||||
"plugins": [ |
|
||||
"vue", |
|
||||
"@typescript-eslint" |
|
||||
], |
|
||||
"rules": { |
|
||||
} |
|
||||
}; |
}; |
||||
|
|||||
@ -0,0 +1,473 @@ |
|||||
|
<template> |
||||
|
<view class="zzx-calendar"> |
||||
|
<view class="calendar-heander"> |
||||
|
{{ timeStr }} |
||||
|
</view> |
||||
|
|
||||
|
<!-- 星期几标题 --> |
||||
|
<view class="calendar-weeks"> |
||||
|
<view class="calendar-week" :class="{ 'text-red-500': week === '六' || week === '日' }" v-for="(week, index) in weeks" :key="index"> |
||||
|
{{ week }} |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="calendar-content"> |
||||
|
<swiper |
||||
|
class="calendar-swiper" |
||||
|
:style="{ |
||||
|
width: '100%', |
||||
|
height: sheight, |
||||
|
}" |
||||
|
:indicator-dots="false" |
||||
|
:autoplay="false" |
||||
|
:duration="duration" |
||||
|
:current="current" |
||||
|
@change="changeSwp" |
||||
|
:circular="true" |
||||
|
> |
||||
|
<swiper-item class="calendar-item" v-for="sitem in swiper" :key="sitem"> |
||||
|
<view class="calendar-days"> |
||||
|
<!-- 当前的 --> |
||||
|
<template v-if="sitem === current"> |
||||
|
<view |
||||
|
class="calendar-day" |
||||
|
v-for="(item, index) in days" |
||||
|
:key="index" |
||||
|
:class="{ 'day-hidden': !item.show }" |
||||
|
@click="clickItem(item)" |
||||
|
> |
||||
|
<view class="date" :class="[item.isToday ? todayClass : '', item.fullDate === selectedDate ? checkedClass : '']"> |
||||
|
{{ item.time.getDate() }} |
||||
|
</view> |
||||
|
<view class="dot-show" v-if="item.info === '0'" :style="dotStyle"> </view> |
||||
|
</view> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<!-- 下一个月/周 --> |
||||
|
<template v-if="current - sitem === 1 || current - sitem === -2"> |
||||
|
<view |
||||
|
class="calendar-day" |
||||
|
v-for="(item, index) in predays" |
||||
|
:key="index" |
||||
|
:class="{ |
||||
|
'day-hidden': !item.show, |
||||
|
}" |
||||
|
> |
||||
|
<view class="date" :class="[item.isToday ? todayClass : '']"> |
||||
|
{{ item.time.getDate() }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
<!-- 上一个月/周 --> |
||||
|
<template v-else> |
||||
|
<view |
||||
|
class="calendar-day" |
||||
|
v-for="(item, index) in nextdays" |
||||
|
:key="index" |
||||
|
:class="{ |
||||
|
'day-hidden': !item.show, |
||||
|
}" |
||||
|
> |
||||
|
<view class="date" :class="[item.isToday ? todayClass : '']"> |
||||
|
{{ item.time.getDate() }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
</template> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
|
||||
|
<!-- <view class="mode-change" @click="changeMode"> |
||||
|
<view :class="weekMode ? 'mode-arrow-bottom' : 'mode-arrow-top'"> </view> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
|
||||
|
<view class="flex justify-center u-font-18" style="color: #3b82f6" @click="goToday"> 今日 </view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState } from 'vuex'; |
||||
|
import { gegerateDates, formatDate } from './generateDates.js'; |
||||
|
|
||||
|
export default { |
||||
|
props: { |
||||
|
duration: { type: Number, default: 500 }, |
||||
|
// 是否返回今日 |
||||
|
showBack: { type: Boolean, default: false }, |
||||
|
// 今日的自定义样式class |
||||
|
todayClass: { type: String, default: 'is-today' }, |
||||
|
// 选中日期的样式class |
||||
|
checkedClass: { type: String, default: 'is-checked' }, |
||||
|
// 打点日期的自定义样式 |
||||
|
dotStyle: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return { background: '#4ade80' }; |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
dotList: function (newvalue) { |
||||
|
const days = this.days.slice(0); |
||||
|
const index = days.findIndex(day => day.show); |
||||
|
days.forEach((day, i) => { |
||||
|
newvalue.forEach((item, j) => { |
||||
|
if (i - index === j) { |
||||
|
day.info = item; |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
this.days = days; |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
weeks: ['日', '一', '二', '三', '四', '五', '六'], // 周 |
||||
|
current: 1, |
||||
|
currentYear: '', |
||||
|
currentMonth: '', |
||||
|
currentDate: '', |
||||
|
days: [], |
||||
|
weekMode: false, // false -> 月 true -> 显示周 |
||||
|
swiper: [0, 1, 2], |
||||
|
selectedDate: formatDate(new Date(), 'yyyy-MM-dd'), // 当前选中的日期 |
||||
|
start: '', |
||||
|
end: '', |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
...mapState('project', ['dotList']), |
||||
|
sheight() { |
||||
|
// 根据年月判断有多少行 |
||||
|
// 判断该月有多少天 |
||||
|
let h = '35px'; |
||||
|
if (!this.weekMode) { |
||||
|
const d = new Date(this.currentYear, this.currentMonth, 0); |
||||
|
const days = d.getDate(); // 判断本月有多少天 |
||||
|
let day = new Date(d.setDate(1)).getDay(); |
||||
|
// if (day === 0) { |
||||
|
// day = 7; |
||||
|
// } |
||||
|
const pre = 8 - day; |
||||
|
const rows = Math.ceil((days - pre) / 7) + 1; |
||||
|
h = 35 * rows + 'px'; |
||||
|
} |
||||
|
return h; |
||||
|
}, |
||||
|
|
||||
|
// 当前日期 年月 |
||||
|
timeStr() { |
||||
|
let str = ''; |
||||
|
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
||||
|
const y = d.getFullYear(); |
||||
|
const m = d.getMonth() + 1 <= 9 ? `0${d.getMonth() + 1}` : d.getMonth() + 1; |
||||
|
str = `${y}年${m}月`; |
||||
|
return str; |
||||
|
}, |
||||
|
|
||||
|
// 上一周期的days书籍 |
||||
|
predays() { |
||||
|
let pres = []; |
||||
|
if (this.weekMode) { |
||||
|
// 周模式 |
||||
|
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
||||
|
d.setDate(d.getDate() - 7); |
||||
|
pres = gegerateDates(d, 'week'); |
||||
|
} else { |
||||
|
// 月模式 |
||||
|
const d = new Date(this.currentYear, this.currentMonth - 2, 1); |
||||
|
pres = gegerateDates(d, 'month'); |
||||
|
} |
||||
|
return pres; |
||||
|
}, |
||||
|
|
||||
|
// 下一周期的days书籍 |
||||
|
nextdays() { |
||||
|
let nexts = []; |
||||
|
if (this.weekMode) { |
||||
|
// 周模式 |
||||
|
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
||||
|
d.setDate(d.getDate() + 7); |
||||
|
nexts = gegerateDates(d, 'week'); |
||||
|
} else { |
||||
|
// 月模式 |
||||
|
const d = new Date(this.currentYear, this.currentMonth, 1); |
||||
|
nexts = gegerateDates(d, 'month'); |
||||
|
} |
||||
|
return nexts; |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
this.initDate(); |
||||
|
this.start = this.$moment().startOf('month').valueOf(); |
||||
|
this.end = this.$moment().endOf('month').valueOf(); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// |
||||
|
/** |
||||
|
* 滑动切换上下周期 |
||||
|
* 根据前一个减去目前的值我们可以判断是下一个月/周还是上一个月/周 |
||||
|
* current - pre === 1, -2 下一个月/周 |
||||
|
* current - pre === -1, 2 上一个月或者上一周 |
||||
|
*/ |
||||
|
changeSwp(e) { |
||||
|
const pre = this.current; |
||||
|
const current = e.target.current; |
||||
|
this.current = current; |
||||
|
|
||||
|
if (current - pre === 1 || current - pre === -2) { |
||||
|
// 下一个月 或 下一周 |
||||
|
this.daysNext(); |
||||
|
const arr = this.days.filter(s => s.show); |
||||
|
const end = `${arr[arr.length - 1].fullDate} 23:59:59`; |
||||
|
this.start = this.$moment(arr[0].fullDate).valueOf(); |
||||
|
this.end = this.$moment(end).valueOf(); |
||||
|
this.$emit('handleFindPoint', this.start, this.end); |
||||
|
} else { |
||||
|
// 上一个月 或 上一周 |
||||
|
this.daysPre(); |
||||
|
const arr = this.days.filter(s => s.show); |
||||
|
const end = `${arr[arr.length - 1].fullDate} 23:59:59`; |
||||
|
this.start = this.$moment(arr[0].fullDate).valueOf(); |
||||
|
this.end = this.$moment(end).valueOf(); |
||||
|
this.$emit('handleFindPoint', this.start, this.end); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 初始化日历的方法 |
||||
|
initDate(cur) { |
||||
|
let date = ''; |
||||
|
if (cur) { |
||||
|
date = new Date(cur); |
||||
|
} else { |
||||
|
date = new Date(); |
||||
|
} |
||||
|
this.currentDate = date.getDate(); // 今日几号 |
||||
|
this.currentYear = date.getFullYear(); // 当前年份 |
||||
|
this.currentMonth = date.getMonth() + 1; // 当前月份 |
||||
|
this.currentWeek = date.getDay() === 0 ? 7 : date.getDay(); // 1...6,0 星期几 |
||||
|
// const nowY = new Date().getFullYear(); // 当前年份 |
||||
|
// const nowM = new Date().getMonth() + 1; |
||||
|
// const nowD = new Date().getDate(); // 今日日期 几号 |
||||
|
// const nowW = new Date().getDay(); |
||||
|
// this.selectedDate = formatDate(new Date(), 'yyyy-MM-dd') |
||||
|
this.days = []; |
||||
|
let days = []; |
||||
|
if (this.weekMode) { |
||||
|
days = gegerateDates(date, 'week'); |
||||
|
// this.selectedDate = days[0].fullDate; |
||||
|
} else { |
||||
|
days = gegerateDates(date, 'month'); |
||||
|
// const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/')); |
||||
|
// const isMonth = sel.getFullYear() === this.currentYear && (sel.getMonth() + 1) === this.currentMonth; |
||||
|
// if(!isMonth) { |
||||
|
// this.selectedDate = formatDate(new Date(this.currentYear, this.currentMonth-1,1), 'yyyy-MM-dd') |
||||
|
// } |
||||
|
} |
||||
|
// 设置小红点 |
||||
|
days.forEach((day, i) => { |
||||
|
this.dotList.forEach((item, j) => { |
||||
|
if (i === j) { |
||||
|
day.info = item; |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
this.days = days; |
||||
|
// 派发事件,时间发生改变 |
||||
|
let obj = { |
||||
|
start: '', |
||||
|
end: '', |
||||
|
}; |
||||
|
if (this.weekMode) { |
||||
|
obj.start = this.days[0].time; |
||||
|
obj.end = this.days[6].time; |
||||
|
} else { |
||||
|
const start = new Date(this.currentYear, this.currentMonth - 1, 1); |
||||
|
const end = new Date(this.currentYear, this.currentMonth, 0); |
||||
|
obj.start = start; |
||||
|
obj.end = end; |
||||
|
} |
||||
|
this.$emit('days-change', obj); |
||||
|
}, |
||||
|
|
||||
|
// 上一个 |
||||
|
daysPre() { |
||||
|
if (this.weekMode) { |
||||
|
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
||||
|
d.setDate(d.getDate() - 7); |
||||
|
this.initDate(d); |
||||
|
} else { |
||||
|
const d = new Date(this.currentYear, this.currentMonth - 2, 1); |
||||
|
this.initDate(d); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 下一个 |
||||
|
daysNext() { |
||||
|
if (this.weekMode) { |
||||
|
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
||||
|
d.setDate(d.getDate() + 7); |
||||
|
this.initDate(d); |
||||
|
} else { |
||||
|
const d = new Date(this.currentYear, this.currentMonth, 1); |
||||
|
this.initDate(d); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 切换模式 |
||||
|
changeMode() { |
||||
|
const premode = this.weekMode; |
||||
|
let isweek = false; |
||||
|
if (premode) { |
||||
|
isweek = !!this.days.find(item => item.fullDate === this.selectedDate); |
||||
|
} |
||||
|
this.weekMode = !this.weekMode; |
||||
|
let d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
||||
|
const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/')); |
||||
|
const isMonth = sel.getFullYear() === this.currentYear && sel.getMonth() + 1 === this.currentMonth; |
||||
|
if ((this.selectedDate && isMonth) || isweek) { |
||||
|
d = new Date(this.selectedDate.replace('-', '/').replace('-', '/')); |
||||
|
} |
||||
|
this.initDate(d); |
||||
|
}, |
||||
|
|
||||
|
// 点击日期 |
||||
|
clickItem(e) { |
||||
|
this.selectedDate = e.fullDate; |
||||
|
this.$emit('selected-change', e); |
||||
|
}, |
||||
|
|
||||
|
// 返回 |
||||
|
goToday() { |
||||
|
const d = new Date(); |
||||
|
this.initDate(d); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.zzx-calendar { |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
background-color: #fff; |
||||
|
padding-bottom: 10px; |
||||
|
|
||||
|
.calendar-heander { |
||||
|
text-align: center; |
||||
|
padding: 16px 0; |
||||
|
position: relative; |
||||
|
font-size: 15px; |
||||
|
} |
||||
|
|
||||
|
.calendar-weeks { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
flex-flow: row nowrap; |
||||
|
margin-bottom: 10px; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 12px; |
||||
|
color: #9ca3af; |
||||
|
font-weight: bold; |
||||
|
|
||||
|
.calendar-week { |
||||
|
width: calc(100% / 7); |
||||
|
height: 100%; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
swiper { |
||||
|
width: 100%; |
||||
|
height: 60upx; |
||||
|
} |
||||
|
.calendar-content { |
||||
|
min-height: 30px; |
||||
|
} |
||||
|
.calendar-swiper { |
||||
|
min-height: 35px; |
||||
|
transition: height ease-out 0.3s; |
||||
|
} |
||||
|
.calendar-item { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.calendar-days { |
||||
|
display: flex; |
||||
|
flex-flow: row wrap; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
.calendar-day { |
||||
|
width: calc(100% / 7); |
||||
|
height: 35px; |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
flex-flow: column nowrap; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
position: relative; |
||||
|
} |
||||
|
} |
||||
|
.day-hidden { |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.mode-change { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin-top: 5px; |
||||
|
|
||||
|
.mode-arrow-top { |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-left: 6px solid transparent; |
||||
|
border-right: 6px solid transparent; |
||||
|
border-bottom: 5px solid #ff6633; |
||||
|
} |
||||
|
.mode-arrow-bottom { |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-left: 6px solid transparent; |
||||
|
border-right: 6px solid transparent; |
||||
|
border-top: 5px solid #ff6633; |
||||
|
} |
||||
|
} |
||||
|
.is-today { |
||||
|
background: #ffffff; |
||||
|
border: 1upx solid #ff6633; |
||||
|
border-radius: 50%; |
||||
|
color: #ff6633; |
||||
|
} |
||||
|
.is-checked { |
||||
|
background: #ff6633; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
.date { |
||||
|
width: 25px; |
||||
|
height: 25px; |
||||
|
line-height: 25px; |
||||
|
margin: 0 auto; |
||||
|
border-radius: 25px; |
||||
|
} |
||||
|
.dot-show { |
||||
|
width: 6px; |
||||
|
height: 6px; |
||||
|
// background: red; |
||||
|
border-radius: 5px; |
||||
|
position: absolute; |
||||
|
top: 2px; |
||||
|
right: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,8 @@ |
|||||
|
<template> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
@ -1,66 +1,97 @@ |
|||||
<template> |
<template> |
||||
<view :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14"> |
<view class="flex flex-col h-full bg-gray-50" @click="openAuth"> |
||||
<!-- 标题栏 --> |
<view class="relative" @touchmove="onMove"> |
||||
<Title /> |
<!-- 日历 --> |
||||
|
<Calendar @selected-change="onDateChange" :show-back="true" ref="calendar" @handleFindPoint="handleFindPoint" /> |
||||
<view class="container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100"> |
<!-- 上传 导入wbs --> |
||||
<!-- 角色栏 --> |
<!-- <Upload @success="onUploadSuccess" @error="onUploadError" /> --> |
||||
<Roles /> |
</view> |
||||
|
|
||||
<!-- 日常任务面板 --> |
<!-- 项目列表 --> |
||||
<Globals /> |
<Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" /> |
||||
|
|
||||
<!-- 定期任务面板 --> |
<!-- 全局提示框 --> |
||||
<TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="timeLine" /> |
<u-top-tips ref="uTips"></u-top-tips> |
||||
</view> |
</view> |
||||
</view> |
</template> |
||||
</template> |
|
||||
|
<script setup> |
||||
<script setup> |
import { reactive, ref, onMounted, computed, watch } from 'vue'; |
||||
import { |
import { useStore } from 'vuex'; |
||||
ref, onMounted |
import dayjs from 'dayjs'; |
||||
} from 'vue'; |
import Calendar from '@/components/Calendar/Calendar.vue'; |
||||
import Navbar from '@/components/Title/Title.vue'; |
import Upload from '@/components/Upload/Upload.vue'; |
||||
import Roles from '@/components/Roles/Roles.vue'; |
import Projects from '@/components/Projects/Projects.vue'; |
||||
import Globals from '@/components/Globals/Globals.vue'; |
|
||||
import TimeLine from '@/components/TimeLine/TimeLine.vue'; |
const data = reactive({ |
||||
|
calendar: null, |
||||
let height = ref(null); |
days: [], |
||||
|
}); |
||||
onMounted(() => { |
|
||||
const system = uni.getSystemInfoSync(); |
const height = ref(null); |
||||
height.value = system.windowHeight + 'px'; |
const store = useStore(); |
||||
}); |
const token = computed(() => store.state.user.token); |
||||
|
|
||||
function getTasks() { |
// 监听token |
||||
|
watch( |
||||
} |
() => token.value, |
||||
</script> |
newValue => { |
||||
|
console.log('newValue', newValue); |
||||
<style> |
if (!newValue) return; |
||||
.content { |
if (newValue) { |
||||
display: flex; |
handleFindPoint(); |
||||
flex-direction: column; |
} |
||||
align-items: center; |
}, |
||||
justify-content: center; |
{ immediate: true }, |
||||
} |
); |
||||
|
|
||||
.logo { |
onMounted(() => { |
||||
height: 200rpx; |
const system = uni.getSystemInfoSync(); |
||||
width: 200rpx; |
height.value = `${system.windowHeight}px`; |
||||
margin-top: 200rpx; |
}); |
||||
margin-left: auto; |
|
||||
margin-right: auto; |
const handleFindPoint = async (start, end) => { |
||||
margin-bottom: 50rpx; |
try { |
||||
} |
const startTime = start |
||||
|
|| dayjs() |
||||
.text-area { |
.startOf('month') |
||||
display: flex; |
.valueOf(); |
||||
justify-content: center; |
const endTime = end |
||||
} |
|| dayjs() |
||||
|
.endOf('month') |
||||
.title { |
.valueOf(); |
||||
font-size: 36rpx; |
const res = await uni.$u.api.findRedPoint(startTime, endTime); |
||||
color: #8f8f94; |
store.commit('project/setDotList', res); |
||||
} |
} catch (error) { |
||||
|
console.log('error: ', error); |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
height: 200rpx; |
||||
|
width: 200rpx; |
||||
|
margin-top: 200rpx; |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
margin-bottom: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.text-area { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 36rpx; |
||||
|
color: #8f8f94; |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
@ -0,0 +1,64 @@ |
|||||
|
<template> |
||||
|
<view :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14"> |
||||
|
<!-- 标题栏 --> |
||||
|
<Title /> |
||||
|
|
||||
|
<view class="container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100"> |
||||
|
<!-- 角色栏 --> |
||||
|
<Roles /> |
||||
|
|
||||
|
<!-- 日常任务面板 --> |
||||
|
<Globals /> |
||||
|
|
||||
|
<!-- 定期任务面板 --> |
||||
|
<TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="timeLine" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
import Navbar from '@/components/Title/Title.vue'; |
||||
|
import Roles from '@/components/Roles/Roles.vue'; |
||||
|
import Globals from '@/components/Globals/Globals.vue'; |
||||
|
import TimeLine from '@/components/TimeLine/TimeLine.vue'; |
||||
|
|
||||
|
let height = ref(null); |
||||
|
|
||||
|
onMounted(() => { |
||||
|
const system = uni.getSystemInfoSync(); |
||||
|
height.value = system.windowHeight + 'px'; |
||||
|
}); |
||||
|
|
||||
|
function getTasks() { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
height: 200rpx; |
||||
|
width: 200rpx; |
||||
|
margin-top: 200rpx; |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
margin-bottom: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.text-area { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 36rpx; |
||||
|
color: #8f8f94; |
||||
|
} |
||||
|
</style> |
||||
@ -1,45 +1,46 @@ |
|||||
import { createStore } from 'vuex'; |
import { createStore } from 'vuex'; |
||||
import user from './user/index.js'; |
import user from './user/index.js'; |
||||
import socket from './socket/index.js'; |
import socket from './socket/index.js'; |
||||
|
import project from './project/index.js'; |
||||
// 不属于具体模块的 应用级的 store内容
|
|
||||
const state = { |
// 不属于具体模块的 应用级的 store内容
|
||||
networkConnected: true, // 网络是否连接
|
const state = { |
||||
forceUseStorage: true, // 强制启用storage
|
networkConnected: true, // 网络是否连接
|
||||
systemInfo: null, // 系统设备信息
|
forceUseStorage: true, // 强制启用storage
|
||||
}; |
systemInfo: null, // 系统设备信息
|
||||
|
}; |
||||
const getters = { |
|
||||
// 是否启用本地存储
|
const getters = { |
||||
// 设置了强制启用本地存储 或者 没有网络连接的时候
|
// 是否启用本地存储
|
||||
useStorage({ networkConnected, forceUseStorage }) { |
// 设置了强制启用本地存储 或者 没有网络连接的时候
|
||||
return forceUseStorage || !networkConnected; |
useStorage({ networkConnected, forceUseStorage }) { |
||||
}, |
return forceUseStorage || !networkConnected; |
||||
}; |
}, |
||||
|
}; |
||||
const mutations = { |
|
||||
/** |
const mutations = { |
||||
* 设置网络是否连接的变量 |
/** |
||||
* @param {*} state |
* 设置网络是否连接的变量 |
||||
* @param {boolean} networkConnected |
* @param {*} state |
||||
*/ |
* @param {boolean} networkConnected |
||||
setNetworkConnected(state, networkConnected) { |
*/ |
||||
state.networkConnected = networkConnected; |
setNetworkConnected(state, networkConnected) { |
||||
}, |
state.networkConnected = networkConnected; |
||||
|
}, |
||||
/** |
|
||||
* 设置系统信息的数据 |
/** |
||||
* @param {object} state |
* 设置系统信息的数据 |
||||
* @param {object | null} data 获取到的数据 |
* @param {object} state |
||||
*/ |
* @param {object | null} data 获取到的数据 |
||||
setSystemInfo(state, data) { |
*/ |
||||
state.systemInfo = data; |
setSystemInfo(state, data) { |
||||
}, |
state.systemInfo = data; |
||||
}; |
}, |
||||
|
}; |
||||
export default createStore({ |
|
||||
state, |
export default createStore({ |
||||
getters, |
state, |
||||
mutations, |
getters, |
||||
modules: {user, socket} |
mutations, |
||||
|
modules: { user, socket, project }, |
||||
}); |
}); |
||||
|
|||||
@ -0,0 +1,3 @@ |
|||||
|
const actions = {}; |
||||
|
|
||||
|
export default actions; |
||||
@ -0,0 +1,11 @@ |
|||||
|
const getters = { |
||||
|
/** |
||||
|
* 当前项目的id |
||||
|
* @param {object} project |
||||
|
*/ |
||||
|
projectId({ project }) { |
||||
|
return project.id; |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
export default getters; |
||||
@ -0,0 +1,12 @@ |
|||||
|
import state from './state'; |
||||
|
import getters from './getters'; |
||||
|
import mutations from './mutations'; |
||||
|
import actions from './actions'; |
||||
|
|
||||
|
export default { |
||||
|
namespaced: true, |
||||
|
state, |
||||
|
getters, |
||||
|
mutations, |
||||
|
actions, |
||||
|
}; |
||||
@ -0,0 +1,62 @@ |
|||||
|
const mutations = { |
||||
|
/** |
||||
|
* 设置state projects书籍 |
||||
|
* @param {object} state |
||||
|
* @param {array} projects 项目列表 |
||||
|
*/ |
||||
|
setProjects(state, projects) { |
||||
|
if (!projects || !projects.length) { |
||||
|
state.projects = []; |
||||
|
} else { |
||||
|
state.projects = [...projects]; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 设置子项目收缩展开 |
||||
|
* @param { object } state |
||||
|
* @param { object } options options:{ index,show } |
||||
|
*/ |
||||
|
setProjectItemShow(state, options) { |
||||
|
if (options.show) { |
||||
|
for (var i = 0; i < state.projects.length; i++) { |
||||
|
if (i === options.index) { |
||||
|
state.projects[i].show = true; |
||||
|
} else { |
||||
|
state.projects[i].show = false; |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
state.projects[options.index].show = false; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 设置当前项目信息 |
||||
|
* @param { object } state |
||||
|
* @param { object } data |
||||
|
*/ |
||||
|
setProject(state, data) { |
||||
|
state.project = data || { name: '加载中...' }; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 设置当前项目名称 |
||||
|
* @param { object } state |
||||
|
* @param { string } data |
||||
|
*/ |
||||
|
setProjectName(state, data) { |
||||
|
state.project.name = data; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 设置小红点 |
||||
|
* @param { object } state |
||||
|
* @param { string } data |
||||
|
*/ |
||||
|
setDotList(state, data) { |
||||
|
state.dotList = data; |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
export default mutations; |
||||
@ -0,0 +1,8 @@ |
|||||
|
/* eslint-disable */ |
||||
|
const state = { |
||||
|
project: { name: '加载中...' }, // 当前项目信息
|
||||
|
projects: [], // 项目列表
|
||||
|
dotList: [], // 小红点
|
||||
|
}; |
||||
|
|
||||
|
export default state; |
||||
@ -1,384 +1,379 @@ |
|||||
import dayjs from 'dayjs'; |
import dayjs from 'dayjs'; |
||||
|
|
||||
// const advancedFormat = require('dayjs/plugin/advancedFormat');
|
// const advancedFormat = require('dayjs/plugin/advancedFormat');
|
||||
// const weekOfYear = require('dayjs/plugin/weekOfYear');
|
// const weekOfYear = require('dayjs/plugin/weekOfYear');
|
||||
// const duration = require('dayjs/plugin/duration');
|
// const duration = require('dayjs/plugin/duration');
|
||||
|
|
||||
// dayjs.extend(advancedFormat);
|
// dayjs.extend(advancedFormat);
|
||||
// dayjs.extend(weekOfYear);
|
// dayjs.extend(weekOfYear);
|
||||
// dayjs.extend(duration);
|
// dayjs.extend(duration);
|
||||
|
|
||||
/** |
/** |
||||
* 格式化数字 |
* 格式化数字 |
||||
* @param {*} n |
* @param {*} n |
||||
*/ |
*/ |
||||
const formatNumber = n => { |
const formatNumber = (n) => { |
||||
const str = n.toString(); |
const str = n.toString(); |
||||
return str[1] ? str : `0${str}`; |
return str[1] ? str : `0${str}`; |
||||
}; |
}; |
||||
|
|
||||
/** |
/** |
||||
* 格式化时间 |
* 格式化时间 |
||||
* @param {number} beginTime |
* @param {number} beginTime |
||||
*/ |
*/ |
||||
const formatTime = beginTime => { |
const formatTime = (beginTime) => { |
||||
const date = new Date(beginTime); |
const date = new Date(beginTime); |
||||
const year = date.getFullYear(); |
const year = date.getFullYear(); |
||||
const month = date.getMonth() + 1; |
const month = date.getMonth() + 1; |
||||
const day = date.getDate(); |
const day = date.getDate(); |
||||
const hour = date.getHours(); |
const hour = date.getHours(); |
||||
const minute = date.getMinutes(); |
const minute = date.getMinutes(); |
||||
const second = date.getSeconds(); |
const second = date.getSeconds(); |
||||
|
|
||||
return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`; |
return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`; |
||||
}; |
}; |
||||
|
|
||||
/** |
/** |
||||
* 添加一定时间的时长 |
* 添加一定时间的时长 |
||||
* @param {number | date} time |
* @param {number | date} time |
||||
* @param {number} num |
* @param {number} num |
||||
* @param {string} cycle |
* @param {string} cycle |
||||
*/ |
*/ |
||||
const add = (time, num, cycle) => { |
const add = (time, num, cycle) => { |
||||
const str = dayjs(time).add(num, cycle); |
const str = dayjs(time).add(num, cycle); |
||||
return str; |
return str; |
||||
}; |
}; |
||||
|
|
||||
/** |
/** |
||||
* 时间转换 08:00 转换成8小时0分钟 |
* 时间转换 08:00 转换成8小时0分钟 |
||||
* @param {string} time |
* @param {string} time |
||||
* @returns {{hours: number, minutes: number}} |
* @returns {{hours: number, minutes: number}} |
||||
*/ |
*/ |
||||
const convertTime = time => { |
const convertTime = (time) => { |
||||
const arr = time.split(':'); |
const arr = time.split(':'); |
||||
return { |
return { |
||||
hours: parseInt(arr[0], 10), |
hours: parseInt(arr[0], 10), |
||||
minutes: parseInt(arr[1], 10), |
minutes: parseInt(arr[1], 10), |
||||
}; |
}; |
||||
}; |
}; |
||||
|
|
||||
/** |
/** |
||||
* 将秒 -> 分 秒 |
* 将秒 -> 分 秒 |
||||
* @param {number} seconds |
* @param {number} seconds |
||||
*/ |
*/ |
||||
const secondToMinute = seconds => { |
const secondToMinute = (seconds) => { |
||||
const minute = formatNumber(Math.floor(seconds / 60)); |
const minute = formatNumber(Math.floor(seconds / 60)); |
||||
const second = formatNumber(parseInt(seconds % 60, 10)); |
const second = formatNumber(parseInt(seconds % 60, 10)); |
||||
return { |
return { |
||||
minute, |
minute, |
||||
second, |
second, |
||||
}; |
}; |
||||
}; |
}; |
||||
|
|
||||
/** |
/** |
||||
* 将时间戳 -> 时:分 |
* 将时间戳 -> 时:分 |
||||
* @param {Number} timestamp 时间戳 |
* @param {Number} timestamp 时间戳 |
||||
* @return date:2018/10/09 time: 12:59 |
* @return date:2018/10/09 time: 12:59 |
||||
*/ |
*/ |
||||
const setTimestampToStr = timestamp => { |
const setTimestampToStr = (timestamp) => { |
||||
const timeObj = new Date(timestamp); |
const timeObj = new Date(timestamp); |
||||
const year = timeObj.getFullYear(); |
const year = timeObj.getFullYear(); |
||||
const month = formatNumber(timeObj.getMonth() + 1); |
const month = formatNumber(timeObj.getMonth() + 1); |
||||
const day = formatNumber(timeObj.getDate()); |
const day = formatNumber(timeObj.getDate()); |
||||
const hour = formatNumber(timeObj.getHours()); |
const hour = formatNumber(timeObj.getHours()); |
||||
const minute = formatNumber(timeObj.getMinutes()); |
const minute = formatNumber(timeObj.getMinutes()); |
||||
const date = `${year}-${month}-${day}`; |
const date = `${year}-${month}-${day}`; |
||||
const time = `${hour}:${minute}`; |
const time = `${hour}:${minute}`; |
||||
return { |
return { |
||||
date, |
date, |
||||
time, |
time, |
||||
}; |
}; |
||||
}; |
}; |
||||
|
|
||||
/** |
/** |
||||
* 检测时间(ms)是不是今天 |
* 检测时间(ms)是不是今天 |
||||
* @param {Number} time 时间戳 |
* @param {Number} time 时间戳 |
||||
*/ |
*/ |
||||
const validateTimeIsToday = time => { |
const validateTimeIsToday = (time) => { |
||||
const timeDate = new Date(time); |
const timeDate = new Date(time); |
||||
const date = new Date(); |
const date = new Date(); |
||||
return timeDate.getFullYear() === date.getFullYear() && timeDate.getMonth() === date.getMonth() && timeDate |
return timeDate.getFullYear() === date.getFullYear() && timeDate.getMonth() === date.getMonth() && timeDate |
||||
.getDate() === date.getDate(); |
.getDate() === date.getDate(); |
||||
}; |
}; |
||||
|
|
||||
/** |
/** |
||||
* 检测两个日期是否相同 |
* 检测两个日期是否相同 |
||||
* @param {number | date} time |
* @param {number | date} time |
||||
* @param {number | date} value |
* @param {number | date} value |
||||
* @param {string} cycle 传入 day 将会比较 day、 month和 year |
* @param {string} cycle 传入 day 将会比较 day、 month和 year |
||||
*/ |
*/ |
||||
const isSame = (time, value, cycle) => { |
const isSame = (time, value, cycle) => { |
||||
const str = dayjs(time).isSame(value, cycle); |
const str = dayjs(time).isSame(value, cycle); |
||||
return str; |
return str; |
||||
}; |
}; |
||||
|
|
||||
/** |
/** |
||||
* 格式化开始时间 |
* 格式化开始时间 |
||||
* @param {Number} timestamp 时间戳 |
* @param {Number} timestamp 时间戳 |
||||
* @return |
* @return |
||||
* 如果是今天 -> 时:分 |
* 如果是今天 -> 时:分 |
||||
* 如果不是今年 -> 年/月/日 时:分 |
* 如果不是今年 -> 年/月/日 时:分 |
||||
* 否则 *月*日 时:分 |
* 否则 *月*日 时:分 |
||||
*/ |
*/ |
||||
const formatBeginTime = timestamp => { |
const formatBeginTime = (timestamp) => { |
||||
const timeObj = new Date(timestamp); |
const timeObj = new Date(timestamp); |
||||
const year = timeObj.getFullYear(); |
const year = timeObj.getFullYear(); |
||||
const month = formatNumber(timeObj.getMonth() + 1); |
const month = formatNumber(timeObj.getMonth() + 1); |
||||
const day = formatNumber(timeObj.getDate()); |
const day = formatNumber(timeObj.getDate()); |
||||
const hour = formatNumber(timeObj.getHours()); |
const hour = formatNumber(timeObj.getHours()); |
||||
const minute = formatNumber(timeObj.getMinutes()); |
const minute = formatNumber(timeObj.getMinutes()); |
||||
const date = `${year}/${month}/${day}`; |
const date = `${year}/${month}/${day}`; |
||||
const time = `${hour}:${minute}`; |
const time = `${hour}:${minute}`; |
||||
const currentYear = new Date().getFullYear(); |
const currentYear = new Date().getFullYear(); |
||||
|
|
||||
if (validateTimeIsToday(timestamp)) { |
if (validateTimeIsToday(timestamp)) { |
||||
// 今天
|
// 今天
|
||||
return `今天 ${time}`; |
return `今天 ${time}`; |
||||
} else if (currentYear !== year) { |
} if (currentYear !== year) { |
||||
// 不是今年
|
// 不是今年
|
||||
return `${date} ${time}`; |
return `${date} ${time}`; |
||||
} else { |
} |
||||
return `${month}月${day}日 ${time}`; |
return `${month}月${day}日 ${time}`; |
||||
} |
}; |
||||
}; |
|
||||
|
/** |
||||
/** |
* 格式化时长 |
||||
* 格式化时长 |
* @param {Number} duration 时长 |
||||
* @param {Number} duration 时长 |
* 超过24小时（ 24 * 60 * 60 * 1000 ms） 转换成天数 + 小时 + 分钟 |
||||
* 超过24小时（ 24 * 60 * 60 * 1000 ms） 转换成天数 + 小时 + 分钟 |
* 小于1分钟（ 60 * 1000 ms） 转换成秒钟 |
||||
* 小于1分钟（ 60 * 1000 ms） 转换成秒钟 |
* 其余的显示分钟 |
||||
* 其余的显示分钟 |
* 超过2小时（ 2 * 60 * 60 * 1000 ms） 转换成小时 + 分钟数 |
||||
* 超过2小时（ 2 * 60 * 60 * 1000 ms） 转换成小时 + 分钟数 |
*/ |
||||
*/ |
const formatDuration = (duration) => { |
||||
const formatDuration = duration => { |
const minuteTime = 60 * 1000; |
||||
const minuteTime = 60 * 1000; |
const hourTime = 60 * minuteTime; |
||||
const hourTime = 60 * minuteTime; |
const dayTime = 24 * hourTime; |
||||
const dayTime = 24 * hourTime; |
const days = Math.floor(duration / dayTime); |
||||
const days = Math.floor(duration / dayTime); |
const hours = Math.floor((duration % dayTime) / hourTime); |
||||
const hours = Math.floor((duration % dayTime) / hourTime); |
const minutes = Math.floor((duration % hourTime) / minuteTime); |
||||
const minutes = Math.floor((duration % hourTime) / minuteTime); |
if (duration <= 60 * 1000) { |
||||
if (duration <= 60 * 1000) { |
// 小于1分钟 返回几秒
|
||||
// 小于1分钟 返回几秒
|
return `${Math.floor(duration / 1000)}秒`; |
||||
return `${Math.floor(duration / 1000)}秒`; |
} if (duration > dayTime) { |
||||
} else if (duration > dayTime) { |
// 大于1天
|
||||
// 大于1天
|
if (minutes === 0) { |
||||
if (minutes === 0) { |
if (hours === 0) { |
||||
if (hours === 0) { |
// 分钟数是0 和 小时数是0 返回 几天
|
||||
// 分钟数是0 和 小时数是0 返回 几天
|
return `${days}天`; |
||||
return `${days}天`; |
} |
||||
} else { |
// 分钟是0 小时不是0 返回 几天几小时
|
||||
// 分钟是0 小时不是0 返回 几天几小时
|
return `${days}天${hours}小时`; |
||||
return `${days}天${hours}小时`; |
} |
||||
} |
// 分钟不是0 返回几天几时几分
|
||||
} else { |
return `${days}天${hours}时${minutes}分`; |
||||
// 分钟不是0 返回几天几时几分
|
} if (duration > 2 * hourTime) { |
||||
return `${days}天${hours}时${minutes}分`; |
// 大于2h
|
||||
} |
if (minutes === 0) { |
||||
} else if (duration > 2 * hourTime) { |
// 分钟是0 返回几小时
|
||||
// 大于2h
|
return `${hours}小时`; |
||||
if (minutes === 0) { |
} |
||||
// 分钟是0 返回几小时
|
// 分钟不是0 返回几小时几分钟
|
||||
return `${hours}小时`; |
return `${hours}小时${minutes}分钟`; |
||||
} else { |
} |
||||
// 分钟不是0 返回几小时几分钟
|
// 其余情况 返回 几分钟
|
||||
return `${hours}小时${minutes}分钟`; |
return `${parseInt(duration / minuteTime)}分钟`; |
||||
} |
}; |
||||
} else { |
|
||||
// 其余情况 返回 几分钟
|
/** |
||||
return `${parseInt(duration / minuteTime)}分钟`; |
* 格式化时长 转换成对象格式 |
||||
} |
* @param {Number} duration 时长 |
||||
}; |
* 超过24小时（ 24 * 60 * 60 * 1000 ms） 转换成{days, hours, minutes, seconds: 0} |
||||
|
* 小于1分钟（ 60 * 1000 ms） 转换成秒钟 { days: 0, hours: 0, minutes: 0, seconds } |
||||
/** |
* 其余的显示分钟 { days: 0, hours: 0, minutes, seconds: 0 } |
||||
* 格式化时长 转换成对象格式 |
* 超过2小时（ 2 * 60 * 60 * 1000 ms） 转换成{ days: 0, hours, minutes, seconds: 0 } |
||||
* @param {Number} duration 时长 |
*/ |
||||
* 超过24小时（ 24 * 60 * 60 * 1000 ms） 转换成{days, hours, minutes, seconds: 0} |
const formatDurationToObject = (duration) => { |
||||
* 小于1分钟（ 60 * 1000 ms） 转换成秒钟 { days: 0, hours: 0, minutes: 0, seconds } |
const minuteTime = 60 * 1000; |
||||
* 其余的显示分钟 { days: 0, hours: 0, minutes, seconds: 0 } |
const hourTime = 60 * minuteTime; |
||||
* 超过2小时（ 2 * 60 * 60 * 1000 ms） 转换成{ days: 0, hours, minutes, seconds: 0 } |
const dayTime = 24 * hourTime; |
||||
*/ |
const days = Math.floor(duration / dayTime); |
||||
const formatDurationToObject = duration => { |
const hours = Math.floor((duration % dayTime) / hourTime); |
||||
const minuteTime = 60 * 1000; |
const minutes = Math.floor((duration % hourTime) / minuteTime); |
||||
const hourTime = 60 * minuteTime; |
const result = { |
||||
const dayTime = 24 * hourTime; |
days: 0, |
||||
const days = Math.floor(duration / dayTime); |
hours: 0, |
||||
const hours = Math.floor((duration % dayTime) / hourTime); |
minutes: 0, |
||||
const minutes = Math.floor((duration % hourTime) / minuteTime); |
seconds: 0, |
||||
const result = { |
}; |
||||
days: 0, |
if (duration <= 60 * 1000) { |
||||
hours: 0, |
// 小于1分钟 返回几秒
|
||||
minutes: 0, |
result.seconds = Math.floor(duration / 1000); |
||||
seconds: 0, |
} else if (duration > dayTime) { |
||||
}; |
// 大于1天
|
||||
if (duration <= 60 * 1000) { |
if (minutes === 0) { |
||||
// 小于1分钟 返回几秒
|
if (hours === 0) { |
||||
result.seconds = Math.floor(duration / 1000); |
// 分钟数是0 和 小时数是0 返回 几天
|
||||
} else if (duration > dayTime) { |
result.days = days; |
||||
// 大于1天
|
} else { |
||||
if (minutes === 0) { |
// 分钟是0 小时不是0 返回 几天几小时
|
||||
if (hours === 0) { |
result.days = days; |
||||
// 分钟数是0 和 小时数是0 返回 几天
|
result.hours = hours; |
||||
result.days = days; |
} |
||||
} else { |
} else { |
||||
// 分钟是0 小时不是0 返回 几天几小时
|
// 分钟不是0 返回几天几时几分
|
||||
result.days = days; |
result.days = days; |
||||
result.hours = hours; |
result.hours = hours; |
||||
} |
result.minutes = minutes; |
||||
} else { |
} |
||||
// 分钟不是0 返回几天几时几分
|
} else if (duration > 2 * hourTime) { |
||||
result.days = days; |
// 大于2h
|
||||
result.hours = hours; |
if (minutes === 0) { |
||||
result.minutes = minutes; |
// 分钟是0 返回几小时
|
||||
} |
result.hours = hours; |
||||
} else if (duration > 2 * hourTime) { |
} else { |
||||
// 大于2h
|
// 分钟不是0 返回几小时几分钟
|
||||
if (minutes === 0) { |
result.hours = hours; |
||||
// 分钟是0 返回几小时
|
result.minutes = minutes; |
||||
result.hours = hours; |
} |
||||
} else { |
} else { |
||||
// 分钟不是0 返回几小时几分钟
|
// 其余情况 返回 几分钟
|
||||
result.hours = hours; |
result.minutes = minutes; |
||||
result.minutes = minutes; |
} |
||||
} |
return result; |
||||
} else { |
}; |
||||
// 其余情况 返回 几分钟
|
|
||||
result.minutes = minutes; |
/** |
||||
} |
* 将对象格式的时间转换成时间戳 |
||||
return result; |
* @param {obj} 对象格式的时间 days, hours, minutes, seconds |
||||
}; |
* @return 时长的ms |
||||
|
*/ |
||||
/** |
const formatObjectTimeToMs = (days = 0, hours = 0, minutes = 0, seconds = 0) => days * 24 * 60 * 60 * 1000 + hours * 60 * 60 * 1000 + minutes * 60 * 1000 + seconds * 1000; |
||||
* 将对象格式的时间转换成时间戳 |
|
||||
* @param {obj} 对象格式的时间 days, hours, minutes, seconds |
/** |
||||
* @return 时长的ms |
* 计算过滤 周期 |
||||
*/ |
* @param {string} time 周期字符串 |
||||
const formatObjectTimeToMs = (days = 0, hours = 0, minutes = 0, seconds = 0) => { |
* @return {string} cycle 周期英文字符串 |
||||
return days * 24 * 60 * 60 * 1000 + hours * 60 * 60 * 1000 + minutes * 60 * 1000 + seconds * 1000; |
*/ |
||||
}; |
const computeCycle = (time) => { |
||||
|
// 加载下一个周期的任务
|
||||
/** |
let cycle = 'day'; |
||||
* 计算过滤 周期 |
switch (time) { |
||||
* @param {string} time 周期字符串 |
case '天': |
||||
* @return {string} cycle 周期英文字符串 |
cycle = 'day'; |
||||
*/ |
break; |
||||
const computeCycle = time => { |
case '周': |
||||
// 加载下一个周期的任务
|
cycle = 'week'; |
||||
let cycle = 'day'; |
break; |
||||
switch (time) { |
case '月': |
||||
case '天': |
cycle = 'month'; |
||||
cycle = 'day'; |
break; |
||||
break; |
default: |
||||
case '周': |
cycle = '日程'; |
||||
cycle = 'week'; |
break; |
||||
break; |
} |
||||
case '月': |
return cycle; |
||||
cycle = 'month'; |
}; |
||||
break; |
|
||||
default: |
/** |
||||
cycle = '日程'; |
* 将时间按周期语义化 |
||||
break; |
* @param {string} cycle 周期 |
||||
} |
* @param {number|string} time 时间 |
||||
return cycle; |
*/ |
||||
}; |
const formatStartTimeToCycleTime = (cycle, time) => { |
||||
|
let result = ''; |
||||
/** |
const _time = dayjs(+time); |
||||
* 将时间按周期语义化 |
switch (cycle) { |
||||
* @param {string} cycle 周期 |
case '天': |
||||
* @param {number|string} time 时间 |
result = _time.format('YYYY年M月D日'); |
||||
*/ |
break; |
||||
const formatStartTimeToCycleTime = (cycle, time) => { |
case '周': |
||||
let result = ''; |
result = _time.format('YYYY年w周'); |
||||
const _time = dayjs(+time); |
break; |
||||
switch (cycle) { |
case '月': |
||||
case '天': |
result = _time.format('YYYY年M月'); |
||||
result = _time.format('YYYY年M月D日'); |
break; |
||||
break; |
case '日程': |
||||
case '周': |
result = _time.format('YYYY年M月D日 HH:mm'); |
||||
result = _time.format('YYYY年w周'); |
break; |
||||
break; |
default: |
||||
case '月': |
result = _time.format('YYYY年M月D日'); |
||||
result = _time.format('YYYY年M月'); |
break; |
||||
break; |
} |
||||
case '日程': |
return result; |
||||
result = _time.format('YYYY年M月D日 HH:mm'); |
}; |
||||
break; |
|
||||
default: |
/** |
||||
result = _time.format('YYYY年M月D日'); |
* 计算进行中状态剩余时间 显示数字 |
||||
break; |
* @param {number} leftTime 剩余时间ms |
||||
} |
* @returns { num: 显示的数字, time: 演示器演示时长 } |
||||
return result; |
*/ |
||||
}; |
const computeDurationText = (leftTime) => { |
||||
|
try { |
||||
/** |
if (leftTime < 0) { |
||||
* 计算进行中状态剩余时间 显示数字 |
return { |
||||
* @param {number} leftTime 剩余时间ms |
num: 0, |
||||
* @returns { num: 显示的数字, time: 演示器演示时长 } |
time: null, |
||||
*/ |
}; |
||||
const computeDurationText = leftTime => { |
} |
||||
try { |
const { |
||||
if (leftTime < 0) return { |
years, |
||||
num: 0, |
months, |
||||
time: null |
days, |
||||
}; |
hours, |
||||
const { |
minutes, |
||||
years, |
seconds, |
||||
months, |
milliseconds, |
||||
days, |
} = dayjs.duration(leftTime).$d; |
||||
hours, |
let num = 0; |
||||
minutes, |
let time = 1000; |
||||
seconds, |
|
||||
milliseconds |
if (years > 0) { |
||||
} = dayjs.duration(leftTime).$d; |
num = years; |
||||
let num = 0; |
time = 60 * 60 * 1000; // 按小时
|
||||
let time = 1000; |
} else if (months > 0) { |
||||
|
num = months; |
||||
if (years > 0) { |
time = 60 * 60 * 1000; // 按小时
|
||||
num = years; |
} else if (days > 0) { |
||||
time = 60 * 60 * 1000; // 按小时
|
num = days; |
||||
} else if (months > 0) { |
time = 60 * 60 * 1000; // 按小时
|
||||
num = months; |
} else if (hours > 0) { |
||||
time = 60 * 60 * 1000; // 按小时
|
num = hours; |
||||
} else if (days > 0) { |
} else if (minutes > 0) { |
||||
num = days; |
num = minutes; |
||||
time = 60 * 60 * 1000; // 按小时
|
} else if (seconds > 0) { |
||||
} else if (hours > 0) { |
num = seconds; |
||||
num = hours; |
} else if (milliseconds > 0) { |
||||
} else if (minutes > 0) { |
num = milliseconds; |
||||
num = minutes; |
time = 16; |
||||
} else if (seconds > 0) { |
} else { |
||||
num = seconds; |
time = null; |
||||
} else if (milliseconds > 0) { |
} |
||||
num = milliseconds; |
return { |
||||
time = 16; |
num, |
||||
} else { |
time, |
||||
time = null; |
}; |
||||
} |
} catch (error) { |
||||
return { |
console.log('🚀 ~ file: time.js ~ line 335 ~ computeDurationText ~ error', error); |
||||
num, |
return { |
||||
time |
num: 0, |
||||
}; |
time: null, |
||||
} catch (error) { |
}; |
||||
console.log('🚀 ~ file: time.js ~ line 335 ~ computeDurationText ~ error', error); |
} |
||||
return { |
}; |
||||
num: 0, |
|
||||
time: null |
export default { |
||||
}; |
formatNumber, |
||||
} |
formatTime, |
||||
}; |
add, |
||||
|
convertTime, |
||||
export default { |
secondToMinute, |
||||
formatNumber, |
setTimestampToStr, |
||||
formatTime, |
isSame, |
||||
add, |
formatBeginTime, |
||||
convertTime, |
formatDuration, |
||||
secondToMinute, |
formatDurationToObject, |
||||
setTimestampToStr, |
formatObjectTimeToMs, |
||||
isSame, |
computeCycle, |
||||
formatBeginTime, |
formatStartTimeToCycleTime, |
||||
formatDuration, |
computeDurationText, |
||||
formatDurationToObject, |
|
||||
formatObjectTimeToMs, |
|
||||
computeCycle, |
|
||||
formatStartTimeToCycleTime, |
|
||||
computeDurationText, |
|
||||
}; |
}; |
||||
|
|||||
Loading…
Reference in new issue