甘特图
This commit is contained in:
parent
fb86e64837
commit
f843603dc0
1
.vscode/extensions.json
vendored
1
.vscode/extensions.json
vendored
@ -19,7 +19,6 @@
|
||||
"sdras.vue-vscode-snippets",
|
||||
"whtouche.vscode-js-console-utils",
|
||||
"zhuangtongfa.material-theme",
|
||||
"Vue.vscode-typescript-vue-plugin", // 一个TS服务器插件，使TS服务器知道*.vue文件。
|
||||
"esbenp.prettier-vscode", // 代码格式化
|
||||
"dbaeumer.vscode-eslint" // 代码质量检查
|
||||
]
|
||||
|
||||
9
.vscode/settings.json
vendored
9
.vscode/settings.json
vendored
@ -7,6 +7,11 @@
|
||||
"editor.formatOnSave": false,
|
||||
"prettier.enable": false,
|
||||
"unocss.root": ["./"],
|
||||
"editor.quickSuggestions": {
|
||||
"other": true,
|
||||
"comments": true,
|
||||
"strings": true
|
||||
},
|
||||
"typescript.tsdk": "node_modules/typescript/lib",
|
||||
"vue.server.hybridMode": true,
|
||||
"eslint.validate": ["html", "css", "scss", "json", "jsonc"],
|
||||
@ -17,9 +22,7 @@
|
||||
"i18n-ally.keystyle": "nested",
|
||||
"i18n-ally.localesPaths": ["src/locales/langs"],
|
||||
"editor.fontLigatures": true,
|
||||
"editor.quickSuggestions": {
|
||||
"strings": true
|
||||
},
|
||||
|
||||
"editor.tabSize": 2,
|
||||
"files.associations": {
|
||||
"*.env.*": "dotenv",
|
||||
|
||||
50
package.json
50
package.json
@ -60,55 +60,55 @@
|
||||
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-4020720240905001",
|
||||
"@multiavatar/multiavatar": "^1.0.7",
|
||||
"@ontos/material-design-3-theme-builder": "workspace:*",
|
||||
"alova": "^3.0.16",
|
||||
"alova": "^3.0.17",
|
||||
"crypto-js": "^4.2.0",
|
||||
"dayjs": "^1.11.13",
|
||||
"lodash-es": "^4.17.21",
|
||||
"normalize-path": "^3.0.0",
|
||||
"pinia": "^2.2.2",
|
||||
"pinia": "^2.2.3",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"unplugin-vue-components": "^0.27.0",
|
||||
"unplugin-vue-components": "^0.27.4",
|
||||
"vue": "^3.5.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config": "^2.27.3",
|
||||
"@antfu/eslint-config": "^3.7.3",
|
||||
"@dcloudio/types": "^3.4.12",
|
||||
"@dcloudio/uni-automator": "3.0.0-alpha-4020720240905001",
|
||||
"@dcloudio/uni-cli-shared": "3.0.0-alpha-4020720240905001",
|
||||
"@dcloudio/uni-stacktracey": "3.0.0-alpha-4020720240905001",
|
||||
"@dcloudio/vite-plugin-uni": "3.0.0-alpha-4020720240905001",
|
||||
"@egoist/tailwindcss-icons": "^1.8.1",
|
||||
"@iconify/json": "^2.2.245",
|
||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||
"@iconify/json": "^2.2.254",
|
||||
"@rollup/plugin-node-resolve": "^15.3.0",
|
||||
"@types/crypto-js": "^4.2.2",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@types/node": "^20.16.1",
|
||||
"@types/normalize-path": "^3.0.0",
|
||||
"@unocss/eslint-config": "^0.62.3",
|
||||
"@unocss/preset-icons": "^0.62.3",
|
||||
"@unocss/preset-uno": "^0.62.3",
|
||||
"@unocss/transformer-directives": "^0.62.3",
|
||||
"@unocss/vite": "0.62.3",
|
||||
"@vitejs/plugin-vue": "^5.1.2",
|
||||
"@vue/runtime-core": "^3.4.38",
|
||||
"@types/node": "^22.7.4",
|
||||
"@types/normalize-path": "^3.0.2",
|
||||
"@unocss/eslint-config": "^0.63.1",
|
||||
"@unocss/preset-icons": "^0.63.1",
|
||||
"@unocss/preset-uno": "^0.63.1",
|
||||
"@unocss/transformer-directives": "^0.63.1",
|
||||
"@unocss/vite": "0.63.1",
|
||||
"@vitejs/plugin-vue": "^5.1.4",
|
||||
"@vue/runtime-core": "^3.5.10",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"commit-and-tag-version": "^12.4.2",
|
||||
"eslint": "^9.10.0",
|
||||
"commit-and-tag-version": "^12.4.4",
|
||||
"eslint": "^9.11.1",
|
||||
"eslint-plugin-format": "^0.1.2",
|
||||
"globals": "^15.9.0",
|
||||
"lint-staged": "^15.2.9",
|
||||
"picocolors": "^1.0.1",
|
||||
"lint-staged": "^15.2.10",
|
||||
"picocolors": "^1.1.0",
|
||||
"rollup-plugin-visualizer": "^5.12.0",
|
||||
"sass": "^1.79.4",
|
||||
"simple-git-hooks": "^2.11.1",
|
||||
"tsx": "^4.19.0",
|
||||
"typescript": "^5.5.4",
|
||||
"tsx": "^4.19.1",
|
||||
"typescript": "^5.6.2",
|
||||
"uni-mini-router": "^0.1.6",
|
||||
"uni-read-pages-vite": "^0.0.6",
|
||||
"unocss": "^0.62.3",
|
||||
"unocss-preset-weapp": "^0.62.0",
|
||||
"unplugin-auto-import": "^0.18.2",
|
||||
"vite": "^5.4.2",
|
||||
"unocss": "^0.63.1",
|
||||
"unocss-preset-weapp": "^0.62.2",
|
||||
"unplugin-auto-import": "^0.18.3",
|
||||
"vite": "^5.4.8",
|
||||
"vite-plugin-restart": "^0.4.1"
|
||||
},
|
||||
"simple-git-hooks": {
|
||||
|
||||
46
src/App.vue
46
src/App.vue
@ -13,5 +13,51 @@ onHide(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
view,
|
||||
scroll-view,
|
||||
swiper,
|
||||
match-media,
|
||||
movable-area,
|
||||
movable-view,
|
||||
cover-view,
|
||||
cover-image,
|
||||
icon,
|
||||
text,
|
||||
rich-text,
|
||||
progress,
|
||||
button,
|
||||
checkboxe,
|
||||
ditor,
|
||||
form,
|
||||
input,
|
||||
label,
|
||||
picker,
|
||||
picker-view,
|
||||
radio,
|
||||
slider,
|
||||
switch,
|
||||
textarea,
|
||||
navigator,
|
||||
audio,
|
||||
camera,
|
||||
image,
|
||||
video,
|
||||
live-player,
|
||||
live-pusher,
|
||||
map,
|
||||
canvas,
|
||||
web-view,
|
||||
:before,
|
||||
:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 隐藏scroll-view的滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,41 +1,41 @@
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { ThingType } from './type';
|
||||
import dayjs from 'dayjs';
|
||||
import isoWeek from 'dayjs/plugin/isoWeek';
|
||||
import weekday from 'dayjs/plugin/weekday';
|
||||
import { getWeekDates } from './helper';
|
||||
import type { ThingType } from './type';
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
groupedEvents: () => new Map(),
|
||||
timeLineWidth: 80,
|
||||
});
|
||||
dayjs.extend(isoWeek);
|
||||
dayjs.extend(weekday);
|
||||
|
||||
defineComponent({ name: 'GantDate' });
|
||||
|
||||
interface Props {
|
||||
groupedEvents?: Map<number, ThingType[]>;
|
||||
groupedEvents?: Map<number, ThingType[]>
|
||||
timeLineWidth?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
groupedEvents: () => new Map()
|
||||
});
|
||||
|
||||
const value = defineModel('value', {
|
||||
type: Number,
|
||||
default: dayjs().valueOf()
|
||||
|
||||
default: dayjs().valueOf(),
|
||||
});
|
||||
|
||||
/** ** 正确的格式一定为某一天的起始 *** */
|
||||
/** ** 正确的格式一定为某一天的起始 */
|
||||
const selectedDate = computed({
|
||||
get: () => dayjs(value.value).startOf('day').valueOf(),
|
||||
set: val => {
|
||||
set: (val) => {
|
||||
value.value = val;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const weekDates = defineModel('weekDates', {
|
||||
type: Object as () => { date: number; day: string; weekDay: string }[],
|
||||
default: () => []
|
||||
type: Object as () => { date: number, day: string, weekDay: string }[],
|
||||
default: () => [],
|
||||
});
|
||||
|
||||
// 选择日期
|
||||
@ -44,10 +44,10 @@ function selectDate(date: number) {
|
||||
}
|
||||
|
||||
// 日历选择器事件
|
||||
function datePickerChange(time: number) {
|
||||
selectDate(time);
|
||||
weekDates.value = getWeekDates(time);
|
||||
}
|
||||
// function datePickerChange(time: number) {
|
||||
// selectDate(time);
|
||||
// weekDates.value = getWeekDates(time);
|
||||
// }
|
||||
|
||||
// 回到今天
|
||||
function backToToday() {
|
||||
@ -70,18 +70,18 @@ function nextWeek() {
|
||||
}
|
||||
|
||||
const weekDatesForMarks = computed(() => {
|
||||
return weekDates.value.map(item => {
|
||||
return weekDates.value.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
isMark: props.groupedEvents.get(item.date)?.length
|
||||
isMark: props.groupedEvents.get(item.date)?.length,
|
||||
};
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="gantDateShadow flex flex-col px-5 pb-2 pt-6">
|
||||
<div class="relative flex flex-1 flex-row items-center justify-center flex-self-stretch px-7.5">
|
||||
<div class="gantDateShadow flex flex-col pb-2 pt-2">
|
||||
<div class="relative flex flex-1 flex-row items-center justify-center flex-self-stretch">
|
||||
<div class="relative flex flex-row items-center gap-2">
|
||||
<!-- <n-date-picker
|
||||
class="absolute left-0 top-0 z-2 wh-full overflow-hidden opacity-0 !cursor-pointer"
|
||||
@ -93,45 +93,51 @@ const weekDatesForMarks = computed(() => {
|
||||
<span class="font-bold">
|
||||
{{ dayjs(selectedDate).format('YYYY年M月') }}
|
||||
</span>
|
||||
<SvgIcon class="rotate-0 font-bold" icon="ic:round-keyboard-arrow-down" />
|
||||
<SvgIcon class="rotate-0 font-bold" icon="i-ic-round-keyboard-arrow-down" />
|
||||
</div>
|
||||
<!-- <n-button
|
||||
size="small"
|
||||
text
|
||||
class="absolute right-0 text-3 !text-subtitle-color"
|
||||
type="tertiary"
|
||||
<div class="absolute b h-full flex-col flex items-center justify-center right-0 flex-self-stretch">
|
||||
<div
|
||||
class="text-onPrimary text-20 bg-primary py-1 pr-1 pl-2 rounded-l-full flex items-center justify-center line-height-none"
|
||||
@click="backToToday"
|
||||
>
|
||||
回到今日
|
||||
</n-button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative mt-3 flex flex-row items-center flex-self-stretch px-5.5">
|
||||
<div class="absolute left-0 h-5 w-5 flex items-center justify-center rounded-full bg-primary" @click="prevWeek">
|
||||
<SvgIcon class="text-5 text-white font-bold" icon="material-symbols:chevron-left-rounded" />
|
||||
<div
|
||||
class="relative mt-8rpx flex flex-row items-center flex-self-stretch"
|
||||
:style="{
|
||||
paddingLeft: `${props.timeLineWidth}rpx`,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="absolute h-32 w-32 flex items-center justify-center rounded-full bg-primary left-8rpx" @click="prevWeek"
|
||||
>
|
||||
<SvgIcon class="text-28 text-white font-bold" icon="i-material-symbols-chevron-left-rounded" />
|
||||
</div>
|
||||
|
||||
<!-- 周历表 -->
|
||||
<div class="flex flex-1 flex-row items-center justify-between flex-self-stretch px-10">
|
||||
<div class="flex w-[calc((100%/7.5)*7)] flex-row items-center justify-between flex-self-stretch">
|
||||
<div
|
||||
v-for="(item, index) in weekDatesForMarks"
|
||||
:key="index"
|
||||
class="flex flex-col cursor-pointer items-center justify-center"
|
||||
class="flex flex-col cursor-pointer flex-1 items-center justify-center"
|
||||
@click="selectDate(item.date)"
|
||||
>
|
||||
<span
|
||||
class="text-subtitle-color"
|
||||
class="text-20"
|
||||
:class="{
|
||||
'text-primary': item.date === selectedDate
|
||||
'text-primary': item.date === selectedDate,
|
||||
}"
|
||||
>
|
||||
{{ item.weekDay }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class=" font-bold"
|
||||
class="text-20 font-bold"
|
||||
:class="{
|
||||
'text-primary': item.date === selectedDate
|
||||
'text-primary': item.date === selectedDate,
|
||||
}"
|
||||
>
|
||||
{{ item.day }}
|
||||
@ -142,13 +148,14 @@ const weekDatesForMarks = computed(() => {
|
||||
class="mt-0 h-1 w-1 rounded-full"
|
||||
:class="{
|
||||
'bg-primary': item.isMark,
|
||||
'!bg-[#CCCCCC]': item.isMark && item.date < dayjs().startOf('day').valueOf()
|
||||
'!bg-[#CCCCCC]': item.isMark && item.date < dayjs().startOf('day').valueOf(),
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute right-0 h-5 w-5 flex items-center justify-center rounded-full bg-primary" @click="nextWeek">
|
||||
<SvgIcon class="text-5 text-white font-bold" icon="material-symbols:chevron-right-rounded" />
|
||||
|
||||
<div class="absolute right-8rpx h-32 w-32 flex items-center justify-center rounded-full bg-primary" @click="nextWeek">
|
||||
<SvgIcon class="text-5 text-white font-bold" icon="i-material-symbols-chevron-right-rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -156,6 +163,6 @@ const weekDatesForMarks = computed(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gantDateShadow {
|
||||
box-shadow: 0px 8px 20px 10px rgba(0, 0, 0, 0.02);
|
||||
box-shadow: 0rpx 16rpx 40rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,42 +1,42 @@
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs';
|
||||
import type { ThingType } from './type';
|
||||
|
||||
defineComponent({ name: 'GantView' });
|
||||
|
||||
interface Props {
|
||||
value?: number; // 选中的日期 时间戳
|
||||
yStep?: number;
|
||||
minuteStep?: number;
|
||||
weekDates?: { date: number; day: string; weekDay: string }[];
|
||||
groupedEvents?: Map<number, ThingType[]>;
|
||||
}
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
yStep: 80,
|
||||
minuteStep: 80 / 60,
|
||||
value: dayjs().valueOf(),
|
||||
weekDates: () => [],
|
||||
groupedEvents: () => new Map()
|
||||
groupedEvents: () => new Map(),
|
||||
timeLineWidth: 80,
|
||||
});
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
defineComponent({ name: 'GantView' });
|
||||
|
||||
interface Props {
|
||||
value?: number // 选中的日期 时间戳
|
||||
yStep?: number
|
||||
timeLineWidth?: number
|
||||
minuteStep?: number
|
||||
weekDates?: { date: number, day: string, weekDay: string }[]
|
||||
groupedEvents?: Map<number, ThingType[]>
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'clickThing', value: ThingType): void;
|
||||
(e: 'clickThing', value: ThingType): void
|
||||
}
|
||||
|
||||
// Y 轴为 00:00 - 24:00 的时间轴 , 时间步进为 1H , 用dayjs 转换为 00:00 格式
|
||||
const Y_AXIS = Array.from({ length: 24 }, (_, i) => {
|
||||
return {
|
||||
label: dayjs().startOf('day').add(i, 'hour').format('HH:00'),
|
||||
top: i * props.yStep
|
||||
label: dayjs().startOf('day').add(i, 'hour').format('HH'),
|
||||
top: i * props.yStep,
|
||||
};
|
||||
});
|
||||
|
||||
/** ** 正确的格式一定为某一天的起始 *** */
|
||||
/** ** 正确的格式一定为某一天的起始 */
|
||||
const selectedDate = computed(() => {
|
||||
return dayjs(props.value).startOf('day').valueOf();
|
||||
});
|
||||
@ -46,24 +46,18 @@ watch(selectedDate, () => {
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
scrollToThing();
|
||||
});
|
||||
// nextTick(() => {
|
||||
// scrollToThing();
|
||||
// });
|
||||
});
|
||||
|
||||
const scrollbarRef = ref<any | null>(null);
|
||||
|
||||
function scrollToThing() {
|
||||
function scrollToThing(): number {
|
||||
const _thing = props.groupedEvents.get(selectedDate.value);
|
||||
|
||||
const currentTime = dayjs().startOf('minute');
|
||||
|
||||
if (!_thing) {
|
||||
scrollbarRef.value?.scrollTo({
|
||||
top: currentTime.diff(currentTime.startOf('day'), 'minute') * props.minuteStep - props.yStep,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
return;
|
||||
return currentTime.diff(currentTime.startOf('day'), 'minute') * props.minuteStep - props.yStep;
|
||||
}
|
||||
|
||||
let closestEvent: ThingType | null = null;
|
||||
@ -72,8 +66,8 @@ function scrollToThing() {
|
||||
for (const event of _thing) {
|
||||
const eventTime = dayjs(event.startTime);
|
||||
if (
|
||||
!closestEvent ||
|
||||
Math.abs(eventTime.diff(currentTime)) < Math.abs(dayjs(closestEvent.startTime).diff(currentTime))
|
||||
!closestEvent
|
||||
|| Math.abs(eventTime.diff(currentTime)) < Math.abs(dayjs(closestEvent.startTime).diff(currentTime))
|
||||
) {
|
||||
closestEvent = event;
|
||||
}
|
||||
@ -98,33 +92,45 @@ function scrollToThing() {
|
||||
closestEvent = _thing[0];
|
||||
}
|
||||
|
||||
// 滚动到找到的事件位置
|
||||
if (closestEvent && closestEvent.toTop) {
|
||||
scrollbarRef.value?.scrollTo({
|
||||
top: closestEvent!.toTop - props.yStep,
|
||||
behavior: 'smooth'
|
||||
if (!closestEvent.toTop)
|
||||
closestEvent.toTop = 0;
|
||||
return closestEvent.toTop;
|
||||
}
|
||||
|
||||
const scrollTop = computed(() => {
|
||||
const top = uni.upx2px(scrollToThing()) - props.yStep / 4;
|
||||
return top;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative flex-1 border border-red border-solid">
|
||||
<div ref="scrollbarRef" class="absolute left-0 top-0 w-full h-full">
|
||||
<div class="relative flex-1">
|
||||
<scroll-view
|
||||
:scroll-anchoring="true"
|
||||
:scroll-with-animation="true"
|
||||
:scroll-top="scrollTop"
|
||||
:scroll-y="true"
|
||||
class="absolute left-0 top-0 w-full h-full "
|
||||
>
|
||||
<div class="flex flex-row">
|
||||
<!-- time line -->
|
||||
<div class="flex flex-col pl-2 pr-1">
|
||||
<div
|
||||
:style="{
|
||||
width: `${props.timeLineWidth}rpx`,
|
||||
}"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<div
|
||||
v-for="(item, inex) in Y_AXIS"
|
||||
:key="inex"
|
||||
:style="{
|
||||
height: `${props.yStep}rpx`
|
||||
height: `${props.yStep}rpx`,
|
||||
}"
|
||||
>
|
||||
<span
|
||||
class="relative block translate-y-[-50%] text-[#999999FF] line-height-none"
|
||||
class="relative block text-20rpx translate-y-[-50%] text-[#999999FF] line-height-none text-center"
|
||||
:class="{
|
||||
'translate-y-0': inex === 0
|
||||
'translate-y-0': inex === 0,
|
||||
}"
|
||||
>
|
||||
{{ item.label }}
|
||||
@ -137,8 +143,10 @@ function scrollToThing() {
|
||||
<div
|
||||
class="absolute left-0 top-0 z-1 w-full h-full"
|
||||
:style="{
|
||||
'background-image': `linear-gradient(to right, #f7f7f7 1rpx, transparent 1rpx, transparent calc(100% / 7.5)),linear-gradient(to bottom, #f7f7f7 1rpx, transparent 1rpx, transparent ${props.yStep}rpx)`,
|
||||
'background-size': `calc(100%/7.5) ${props.yStep}rpx`
|
||||
'background-image': `linear-gradient(to right, #f7f7f7 1rpx,
|
||||
transparent 1rpx, transparent calc(100% / 7.5)),
|
||||
linear-gradient(to bottom, #f7f7f7 1rpx, transparent 1rpx, transparent ${props.yStep}rpx)`,
|
||||
'background-size': `calc(100%/7.5) ${props.yStep}rpx`,
|
||||
}"
|
||||
/>
|
||||
<!-- 事件组 分为 7day -->
|
||||
@ -153,24 +161,23 @@ function scrollToThing() {
|
||||
:key="index"
|
||||
class="relative flex flex-1 transition-background-color will-change-background-color"
|
||||
>
|
||||
|
||||
<!-- 'background-color': addColorAlpha(itm.color, 0.06) -->
|
||||
<div
|
||||
v-for="itm in props.groupedEvents.get(item.date)"
|
||||
:key="itm.id"
|
||||
class="absolute w-full flex-shrink-0 cursor-pointer flex-self-stretch py-1"
|
||||
class="absolute w-full flex-shrink-0 cursor-pointer flex-self-stretch"
|
||||
:style="{
|
||||
top: `${itm.toTop}rpx`,
|
||||
height: `${itm.height}rpx`,
|
||||
background: itm.color,
|
||||
borderTop: `2rpx solid ${itm.color}`,
|
||||
borderTop: `0rpx solid ${itm.color}`,
|
||||
}"
|
||||
@click="emit('clickThing', itm)"
|
||||
>
|
||||
<span
|
||||
class="text-3"
|
||||
class="text-28 !text-white"
|
||||
:style="{
|
||||
color: itm.color
|
||||
color: itm.color,
|
||||
}"
|
||||
>
|
||||
{{ itm.name }}
|
||||
@ -180,7 +187,7 @@ function scrollToThing() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</scroll-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
74
src/components/WeekGantView/demo.vue
Normal file
74
src/components/WeekGantView/demo.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<!--
|
||||
## File: /src/components/WeekGantView/demo.vue
|
||||
|
||||
Project: uniapp_vue3_vite_ts
|
||||
|
||||
Created Date: 2024-10-02 19:57:19
|
||||
|
||||
Author: KuroSago
|
||||
|
||||
## Last Modified: 2024-10-02 19:57:19
|
||||
|
||||
Modified By:
|
||||
|
||||
## Copyright (c) 2024 self.
|
||||
|
||||
Use To:
|
||||
-->
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineComponent({ name: 'WeekGantViewDemo' });
|
||||
|
||||
const D = dayjs();
|
||||
|
||||
const value = ref(D.valueOf());
|
||||
|
||||
const things = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '测试1',
|
||||
startTime: D.hour(12).minute(0).second(0).millisecond(0).valueOf(),
|
||||
endTime: D.hour(14).minute(0).second(0).millisecond(0).valueOf(),
|
||||
dec: '测试1',
|
||||
color: 'rgba(255, 0, 0, 0.5)',
|
||||
},
|
||||
]);
|
||||
|
||||
// 增加一个测试数据
|
||||
function getRandomTimeWithinWeek() {
|
||||
const now = dayjs();
|
||||
const startOfWeek = now.startOf('week');
|
||||
const endOfWeek = now.endOf('week');
|
||||
const randomTime = startOfWeek.add(Math.random() * (endOfWeek.diff(startOfWeek)), 'millisecond');
|
||||
return randomTime;
|
||||
}
|
||||
function getRandomColor() {
|
||||
const r = Math.floor(Math.random() * 256);
|
||||
const g = Math.floor(Math.random() * 256);
|
||||
const b = Math.floor(Math.random() * 256);
|
||||
const a = Math.random().toFixed(2); // 保留两位小数
|
||||
return `rgba(${r}, ${g}, ${b}, ${a})`;
|
||||
}
|
||||
function addThing() {
|
||||
const startTime = getRandomTimeWithinWeek();
|
||||
const endTime = startTime.add(Math.random() * 2, 'hour');
|
||||
|
||||
things.value.push({
|
||||
id: things.value.length + 1,
|
||||
name: `测试${things.value.length + 1}`,
|
||||
startTime: startTime.valueOf(),
|
||||
endTime: endTime.valueOf(),
|
||||
dec: `测试${things.value.length + 1}`,
|
||||
color: getRandomColor(),
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="" @click="addThing">
|
||||
addThing
|
||||
</button>
|
||||
<div class="h-660rpx flex flex-col mx-4 bg-primary-100 rounded-3 shadow overflow-clip ">
|
||||
<week-gant-view v-model:value="value" v-model:things="things" />
|
||||
</div>
|
||||
</template>
|
||||
@ -1,25 +1,15 @@
|
||||
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import type { ThingType } from './type';
|
||||
import isoWeek from 'dayjs/plugin/isoWeek';
|
||||
import weekday from 'dayjs/plugin/weekday';
|
||||
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
|
||||
export function getWeekDates(date: string | number | Date | dayjs.Dayjs | null | undefined) {
|
||||
|
||||
|
||||
dayjs.extend(isoWeek);
|
||||
dayjs.extend(weekday);
|
||||
|
||||
const startOfWeek = dayjs(date).weekday(0);
|
||||
const _weekDates: { date: number; day: string; weekDay: string }[] = [];
|
||||
const _weekDates: { date: number, day: string, weekDay: string }[] = [];
|
||||
for (let i = 0; i < 7; i += 1) {
|
||||
_weekDates.push({
|
||||
date: startOfWeek.add(i, 'day').startOf('day').valueOf(),
|
||||
day: startOfWeek.add(i, 'day').format('D'),
|
||||
weekDay: startOfWeek.add(i, 'day').format('周dd')
|
||||
weekDay: startOfWeek.add(i, 'day').format('ddd'),
|
||||
});
|
||||
}
|
||||
return _weekDates;
|
||||
@ -27,14 +17,14 @@ export function getWeekDates(date: string | number | Date | dayjs.Dayjs | null |
|
||||
|
||||
export function groupEventsByDay({
|
||||
events,
|
||||
minuteStep
|
||||
minuteStep,
|
||||
}: {
|
||||
events: ThingType[];
|
||||
minuteStep: number;
|
||||
events: ThingType[]
|
||||
minuteStep: number
|
||||
}): Map<number, ThingType[]> {
|
||||
const _groupedEvents = new Map();
|
||||
|
||||
events.forEach(event => {
|
||||
events.forEach((event) => {
|
||||
const { startTime, endTime } = event;
|
||||
|
||||
const startOfDay = dayjs(startTime).startOf('day').valueOf();
|
||||
@ -50,7 +40,7 @@ export function groupEventsByDay({
|
||||
_groupedEvents.get(startOfDay).push({
|
||||
...event,
|
||||
toTop: toTop * minuteStep,
|
||||
height: duration * minuteStep
|
||||
height: duration * minuteStep,
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -1,48 +1,49 @@
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs';
|
||||
import type { ThingType } from './type';
|
||||
import { getWeekDates, groupEventsByDay } from './helper';
|
||||
import dayjs from 'dayjs';
|
||||
import GantDate from './GantDate.vue';
|
||||
import GantView from './GantView.vue';
|
||||
|
||||
defineComponent({ name: 'WeekGantView' });
|
||||
import { getWeekDates, groupEventsByDay } from './helper';
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
defineComponent({ name: 'WeekGantView' });
|
||||
|
||||
interface Emits {
|
||||
(
|
||||
e: 'update:value',
|
||||
value: number,
|
||||
params: {
|
||||
isSameWeek: boolean;
|
||||
isSameWeek: boolean
|
||||
}
|
||||
): void;
|
||||
(e: 'clickThing', value: ThingType): void;
|
||||
): void
|
||||
(e: 'clickThing', value: ThingType): void
|
||||
}
|
||||
|
||||
// Y 轴高度步进 单位 px , 1H = 80px
|
||||
const Y_STEP = 80;
|
||||
|
||||
// time line 宽度
|
||||
const TIME_LINE_WIDTH = 44;
|
||||
|
||||
// 每分钟的高度
|
||||
const MINUTE_STEP = Y_STEP / 60;
|
||||
|
||||
const value = defineModel('value', {
|
||||
type: Number,
|
||||
default: dayjs().valueOf()
|
||||
default: dayjs().valueOf(),
|
||||
});
|
||||
|
||||
const selectedDate = ref(value.value);
|
||||
|
||||
const loading = defineModel('loading', {
|
||||
type: Boolean,
|
||||
default: false
|
||||
});
|
||||
// const loading = defineModel('loading', {
|
||||
// type: Boolean,
|
||||
// default: false,
|
||||
// });
|
||||
|
||||
const things = defineModel('things', {
|
||||
type: Object as () => ThingType[],
|
||||
default: () => []
|
||||
default: () => [],
|
||||
});
|
||||
|
||||
const weekDates = ref(getWeekDates(selectedDate.value));
|
||||
@ -50,8 +51,8 @@ const weekDates = ref(getWeekDates(selectedDate.value));
|
||||
const groupedEvents = computed(() =>
|
||||
groupEventsByDay({
|
||||
events: things.value,
|
||||
minuteStep: MINUTE_STEP
|
||||
})
|
||||
minuteStep: MINUTE_STEP,
|
||||
}),
|
||||
);
|
||||
|
||||
watch(selectedDate, (n_val, o_val) => {
|
||||
@ -63,14 +64,15 @@ watch(selectedDate, (n_val, o_val) => {
|
||||
|
||||
<template>
|
||||
<div :delay="1000" content-class="flex flex-1 flex-col" class="flex flex-1 flex-col">
|
||||
<gant-date v-model:value="selectedDate" v-model:weekDates="weekDates" :grouped-events="groupedEvents" />
|
||||
<gant-view
|
||||
<GantDate v-model:value="selectedDate" v-model:week-dates="weekDates" :grouped-events="groupedEvents" :time-line-width="TIME_LINE_WIDTH" />
|
||||
<GantView
|
||||
v-if="things.length"
|
||||
:grouped-events="groupedEvents"
|
||||
:week-dates="weekDates"
|
||||
:y-step="Y_STEP"
|
||||
:minute-step="MINUTE_STEP"
|
||||
:value="selectedDate"
|
||||
:time-line-width="TIME_LINE_WIDTH"
|
||||
@click-thing="
|
||||
e => {
|
||||
emit('clickThing', e);
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { createSSRApp } from 'vue';
|
||||
import isoWeek from 'dayjs/plugin/isoWeek';
|
||||
import weekday from 'dayjs/plugin/weekday';
|
||||
import App from './App.vue';
|
||||
import { setupRouter } from './router';
|
||||
import { setupStore } from './stores';
|
||||
@ -10,6 +12,10 @@ export function createApp() {
|
||||
setupStore(app);
|
||||
app.mixin(themeMixin);
|
||||
setupRouter(app);
|
||||
|
||||
dayjs.extend(isoWeek);
|
||||
dayjs.extend(weekday);
|
||||
|
||||
return {
|
||||
app,
|
||||
};
|
||||
|
||||
@ -9,15 +9,16 @@
|
||||
|
||||
## Last Modified: 2024-06-24 11:30:88
|
||||
|
||||
Modified By: Administrator
|
||||
Modified By: kurosago
|
||||
|
||||
## Copyright (c) 2024 self.
|
||||
|
||||
Use To: 启动页面
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/stores/modules/user';
|
||||
import WeekGantViewDemo from '@/components/WeekGantView/demo.vue';
|
||||
import { useSystemInfoStore } from '@/stores/modules/system';
|
||||
import { useUserStore } from '@/stores/modules/user';
|
||||
|
||||
const { changeThemeModel } = useSystemInfoStore();
|
||||
|
||||
@ -63,41 +64,25 @@ function toNumerology() {
|
||||
name: 'Numerology',
|
||||
});
|
||||
}
|
||||
|
||||
const D = dayjs();
|
||||
|
||||
const things = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '测试1',
|
||||
startTime: D.startOf('day').valueOf(),
|
||||
endTime: D.endOf('day').valueOf(),
|
||||
dec: '测试1',
|
||||
color: 'rgba(255, 0, 0, 0.5)',
|
||||
},
|
||||
]);
|
||||
|
||||
const value = ref(D.valueOf());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="bg-primary-90 flex-1">
|
||||
<div class="h-600rpx flex flex-col border border-red border-solid" >
|
||||
<week-gant-view v-model:value="value" v-model:things="things"/>
|
||||
</div>
|
||||
<view class="bg-background flex-1">
|
||||
<div class="flex flex-col gap-4 mt-32rpx">
|
||||
<WeekGantViewDemo />
|
||||
|
||||
|
||||
<!-- <span @click="changeTheme">
|
||||
<button @click="changeTheme">
|
||||
changeTheme
|
||||
</span> -->
|
||||
</button>
|
||||
|
||||
<!-- <button @click="toColorCard">
|
||||
<button @click="toColorCard">
|
||||
色卡
|
||||
</button>
|
||||
|
||||
<button @click="toNumerology">
|
||||
算命
|
||||
</button> -->
|
||||
</button>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
1
src/types/import-components.d.ts
vendored
1
src/types/import-components.d.ts
vendored
@ -10,6 +10,7 @@ declare module 'vue' {
|
||||
AppProvider: typeof import('./../components/AppProvider/index.vue')['default']
|
||||
BasicButton: typeof import('./../components/BasicButton/index.vue')['default']
|
||||
CourseDetailGant: typeof import('./../components/CourseDetailGant/index.vue')['default']
|
||||
Demo: typeof import('./../components/WeekGantView/demo.vue')['default']
|
||||
Gant: typeof import('./../components/Gant/index.vue')['default']
|
||||
GantDate: typeof import('./../components/WeekGantView/GantDate.vue')['default']
|
||||
GantView: typeof import('./../components/WeekGantView/GantView.vue')['default']
|
||||
|
||||
@ -34,7 +34,9 @@ export default defineConfig(async ({ mode }) => {
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: '@import "./src/uni.scss";',
|
||||
// additionalData: '@import "./src/uni.scss";',
|
||||
quietDeps: true,
|
||||
api: 'modern-compiler',
|
||||
},
|
||||
},
|
||||
|
||||
@ -44,7 +46,6 @@ export default defineConfig(async ({ mode }) => {
|
||||
server: {
|
||||
// host: true,
|
||||
open: true,
|
||||
https: true,
|
||||
port: Number.parseInt(VITE_PORT!, 10),
|
||||
proxy: resolveProxy([[VITE_PROXY_PREFIX! as string, VITE_BASE_URL! as string], [VITE_UPLOAD_PROXY_PREFIX! as string, VITE_UPLOAD_URL! as string]]),
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user