From 2ba3bb036bec78a23061e70ba0ccb14e2869620e Mon Sep 17 00:00:00 2001 From: "ex_zhangwenlei@exiot.cmcc" <15196725410@139.com> Date: Thu, 11 Jan 2024 23:53:53 +0800 Subject: [PATCH] feat: pattern config --- src/App.vue | 31 +- src/hooks/useElement.ts | 97 ++++-- src/icons/wave.svg | 67 ++++ src/store/data.ts | 1 + src/store/globalConfig.ts | 30 +- src/store/index.ts | 4 +- src/store/personConfig.ts | 1 - src/store/system.ts | 30 ++ src/style/style.scss | 14 +- src/types/storeType.ts | 1 + src/utils/index.ts | 9 + src/views/Config/Global/FaceConfig.vue | 84 +++-- .../Global/components/PatternSetting.vue | 57 +++ src/views/Config/Prize/PrizeConfig.vue | 2 +- src/views/Config/index.vue | 2 +- src/views/Home/PrizeList.vue | 10 +- src/views/Home/index.vue | 324 +++++++++++++----- todo.todo | 4 +- 18 files changed, 621 insertions(+), 147 deletions(-) create mode 100644 src/icons/wave.svg create mode 100644 src/store/system.ts create mode 100644 src/views/Config/Global/components/PatternSetting.vue diff --git a/src/App.vue b/src/App.vue index f530b1e..25b12ad 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,5 @@ diff --git a/src/hooks/useElement.ts b/src/hooks/useElement.ts index 2f5d982..33803e5 100644 --- a/src/hooks/useElement.ts +++ b/src/hooks/useElement.ts @@ -1,54 +1,91 @@ import { rgba } from '@/utils/color' +import { IPersonConfig } from '@/types/storeType' -export const useElementStyle=(element:any,cardColor:string,cardSize:{width:number,height:number},textSize:number,mod:'default'|'lucky'='default')=>{ - element.style.backgroundColor = rgba(cardColor, mod=='default'?Math.random() * 0.5 + 0.25:0.8) +export const useElementStyle = (element: any, person: IPersonConfig, index: number, patternList: number[], patternColor: string, cardColor: string, cardSize: { width: number, height: number }, textSize: number, mod: 'default' | 'lucky'|'sphere' = 'default') => { + if (patternList.includes(index+1)&&mod=='default') { + element.style.backgroundColor = rgba(patternColor, Math.random() * 0.5 + 0.5) + } + else if(mod=='sphere'||mod=='default') { + element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25) + } + else if(mod=='lucky'){ + element.style.backgroundColor = rgba(cardColor, 0.8) + } element.style.border = `1px solid ${rgba(cardColor, 0.25)}` element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}` element.style.width = `${cardSize.width}px`; element.style.height = `${cardSize.height}px`; + if (mod == 'lucky') { + element.className = 'lucky-element-card' + } + else { + element.className = 'element-card' + } // 等比放大 - - element.addEventListener('mouseenter', (ev:MouseEvent)=> { - // 子元素无效 - // ev.stopPropagation() - // ev.preventDefault() + element.addEventListener('mouseenter', (ev: MouseEvent) => { const target = ev.target as HTMLElement target.style.border = `1px solid ${rgba(cardColor, 0.75)}` target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}` }) - element.addEventListener('mouseleave', (ev:MouseEvent)=>{ - // ev.stopPropagation() - // ev.preventDefault() - const target=ev.target as HTMLElement + element.addEventListener('mouseleave', (ev: MouseEvent) => { + const target = ev.target as HTMLElement target.style.border = `1px solid ${rgba(cardColor, 0.25)}` target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}` }) - element.children[0].style.fontSize = textSize*0.5+'px' - - element.children[1].style.fontSize = textSize+'px' - element.children[1].style.lineHeight = textSize*3+'px' + element.children[0].style.fontSize = textSize * 0.5 + 'px'; + if (person.uid) { + element.children[0].textContent = person.uid; + } + + element.children[1].style.fontSize = textSize + 'px' + element.children[1].style.lineHeight = textSize * 3 + 'px' element.children[1].style.textShadow = `0 0 12px ${rgba(cardColor, 0.95)}` - - element.children[2].style.fontSize = textSize*0.5+'px' + if (person.name) { + element.children[1].textContent = person.name + } + + element.children[2].style.fontSize = textSize * 0.5 + 'px' + if (person.department || person.identity) { + element.children[2].innerHTML = `${person.department ? person.department : ''}
${person.identity ? person.identity : ''}` + } return element } -export const useElementPosition=(element:any,count:number,cardSize:{width:number,height:number},windowSize:{width:number,height:number},cardIndex:number)=>{ - const centerPosition={ - x:0, - y:windowSize.height/2-cardSize.height/2 +// export const useElementPosition=(element:any,count:number,cardSize:{width:number,height:number},windowSize:{width:number,height:number},cardIndex:number)=>{ +// const centerPosition={ +// x:0, +// y:windowSize.height/2-cardSize.height/2 +// } +// const index =cardIndex%5 +// if(index==0){ +// element.position.x=centerPosition.x +// element.position.y=centerPosition.y-Math.floor(cardIndex/5)*(cardSize.height+60) +// } +// else{ +// element.position.x=index%2===0?Math.ceil(index/2)*(cardSize.width+100):-Math.ceil(index/2)*(cardSize.width+100) +// element.position.y=centerPosition.y-Math.floor(cardIndex/5)*(cardSize.height+60) +// } + +// return element +// } + +export const useElementPosition = (element: any, count: number, cardSize: { width: number, height: number }, windowSize: { width: number, height: number }, cardIndex: number) => { + let xTable = 0 + let yTable = 0 + const centerPosition = { + x: 0, + y: windowSize.height / 2 - cardSize.height / 2 } - const index =cardIndex%5 - if(index==0){ - element.position.x=centerPosition.x - element.position.y=centerPosition.y-Math.floor(cardIndex/5)*(cardSize.height+60) + const index = cardIndex % 5 + if (index == 0) { + xTable = centerPosition.x + yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60) } - else{ - element.position.x=index%2===0?Math.ceil(index/2)*(cardSize.width+100):-Math.ceil(index/2)*(cardSize.width+100) - element.position.y=centerPosition.y-Math.floor(cardIndex/5)*(cardSize.height+60) + else { + xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) : -Math.ceil(index / 2) * (cardSize.width + 100) + yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60) } - - return element + return { xTable, yTable } } diff --git a/src/icons/wave.svg b/src/icons/wave.svg new file mode 100644 index 0000000..831894f --- /dev/null +++ b/src/icons/wave.svg @@ -0,0 +1,67 @@ + \ No newline at end of file diff --git a/src/store/data.ts b/src/store/data.ts index 6e4aace..5276208 100644 --- a/src/store/data.ts +++ b/src/store/data.ts @@ -175,3 +175,4 @@ export const defaultImageList = [ url: 'https://24years.top/resource/image/image5.png' } ] +export const defaultPatternList=[19,20,21,38,55,54,53,70,87,88,89,23,40,57,74,91,92,93,76,59,42,25,24,27,28,29,46,63,62,61,78,95,96,97,31,48,65,66,67,33,50,84,101] diff --git a/src/store/globalConfig.ts b/src/store/globalConfig.ts index b63fa6d..d115fbc 100644 --- a/src/store/globalConfig.ts +++ b/src/store/globalConfig.ts @@ -1,5 +1,5 @@ import { defineStore } from 'pinia'; -import { defaultMusicList,defaultImageList } from './data' +import { defaultMusicList,defaultImageList,defaultPatternList } from './data' import {IMusic,IImage} from '@/types/storeType'; // import { IPrizeConfig } from '@/types/storeType'; export const useGlobalConfig = defineStore('global', { @@ -17,7 +17,9 @@ export const useGlobalConfig = defineStore('global', { cardHeight: 200, textColor: '#ffffff', luckyCardColor:'#ECB1AC', - textSize: 30 + textSize: 30, + patternColor:'#1b66c9', + patternList:defaultPatternList as number[], }, musicList: defaultMusicList as IMusic[], imageList:defaultImageList as IImage[], @@ -68,6 +70,14 @@ export const useGlobalConfig = defineStore('global', { getTextSize(state) { return state.globalConfig.theme.textSize; }, + // 获取图案颜色 + getPatterColor(state){ + return state.globalConfig.theme.patternColor; + }, + // 获取图案列表 + getPatternList(state){ + return state.globalConfig.theme.patternList; + }, // 获取音乐列表 getMusicList(state) { return state.globalConfig.musicList; @@ -122,6 +132,18 @@ export const useGlobalConfig = defineStore('global', { setTextSize(textSize: number) { this.globalConfig.theme.textSize = textSize; }, + // 设置图案颜色 + setPatterColor(patterColor: string) { + this.globalConfig.theme.patternColor = patterColor; + }, + // 设置图案列表 + setPatternList(patternList: number[]) { + this.globalConfig.theme.patternList = patternList; + }, + // 重置图案列表 + resetPatternList() { + this.globalConfig.theme.patternList = defaultPatternList; + }, // 添加音乐 addMusic(music: IMusic) { // 验证音乐是否已存在，看name字段 @@ -200,7 +222,9 @@ export const useGlobalConfig = defineStore('global', { cardWidth: 200, cardHeight: 140, textColor: '#ffffff', - textSize: 30 + textSize: 30, + patternColor: '#1b66c9', + patternList:defaultPatternList, }, musicList: defaultMusicList as IMusic[], diff --git a/src/store/index.ts b/src/store/index.ts index 193b2ec..532b46d 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,10 +1,12 @@ import {usePersonConfig} from './personConfig'; import { usePrizeConfig } from './prizeConfig'; import {useGlobalConfig} from './globalConfig'; +import {useSystem} from './system'; export default function useStore() { return { personConfig:usePersonConfig(), prizeConfig:usePrizeConfig(), - globalConfig:useGlobalConfig() + globalConfig:useGlobalConfig(), + system:useSystem(), }; } diff --git a/src/store/personConfig.ts b/src/store/personConfig.ts index 85e03f4..1d1c7cd 100644 --- a/src/store/personConfig.ts +++ b/src/store/personConfig.ts @@ -63,7 +63,6 @@ export const usePersonConfig = defineStore('person', { // person.prizeTime = new Date().toString() } }); - console.log('person;;',person) this.personConfig.alreadyPersonList.push(person); }); }, diff --git a/src/store/system.ts b/src/store/system.ts new file mode 100644 index 0000000..6bfacf5 --- /dev/null +++ b/src/store/system.ts @@ -0,0 +1,30 @@ +import { defineStore } from 'pinia'; +// import { IPrizeConfig } from '@/types/storeType'; +export const useSystem = defineStore('system', { + state() { + return { + isMobile:false + }; + }, + getters: { + getIsMobile(state) { + return state.isMobile; + }, + }, + actions: { + setIsMobile(isMobile: boolean) { + this.isMobile = isMobile; + }, + }, + persist: { + enabled: true, + strategies: [ + { + // 如果要存储在localStorage中 + // storage: localStorage, + // key: 'globalConfig', + // paths: ['globalConfig'], + }, + ], + }, +}) diff --git a/src/style/style.scss b/src/style/style.scss index 0121991..5e268da 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -1,7 +1,6 @@ .element-card { cursor: default; text-align: center; - .card-id { position: absolute; top: 20px; @@ -30,14 +29,18 @@ .lucky-element-card { cursor: default; text-align: center; + &::before { + background-color: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%); + border: 1px solid linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%); + } - .lucky-card-id { + .card-id { position: absolute; top: 20px; right: 20px; } - .lucky-card-name { + .card-name { position: absolute; top: 40px; left: 0px; @@ -46,9 +49,12 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + // -webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both; + // animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both; + // animation-delay: 0.6s; } - .lucky-card-detail { + .card-detail { position: absolute; left: 0; right: 0; diff --git a/src/types/storeType.ts b/src/types/storeType.ts index a5385d3..65d537c 100644 --- a/src/types/storeType.ts +++ b/src/types/storeType.ts @@ -3,6 +3,7 @@ export interface IPersonConfig { uid: string; name: string; department:string; + identity:string; isWin:boolean; x:number; y:number diff --git a/src/utils/index.ts b/src/utils/index.ts index 9f87b22..f6912bc 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -27,3 +27,12 @@ export const addOtherInfo=(personList:any[])=>{ return personList } + +export const selectCard=(cardIndexArr:number[],tableLength:number,personId:number):number=>{ + const cardIndex = Math.round(Math.random() * (tableLength-1)); + if(cardIndexArr.includes(cardIndex)){ + return selectCard(cardIndexArr,tableLength,personId) + } + +return cardIndex +} diff --git a/src/views/Config/Global/FaceConfig.vue b/src/views/Config/Global/FaceConfig.vue index 30c7cdd..dc799e9 100644 --- a/src/views/Config/Global/FaceConfig.vue +++ b/src/views/Config/Global/FaceConfig.vue @@ -9,10 +9,11 @@ import daisyuiThemes from 'daisyui/src/theming/themes' import { ColorPicker } from 'vue3-colorpicker'; import 'vue3-colorpicker/style.css'; import { isRgbOrRgba, isHex } from '@/utils/color' +import PatternSetting from './components/PatternSetting.vue' const globalConfig = useStore().globalConfig const personConfig = useStore().personConfig -const {getTopTitle:topTitle, getTheme: localTheme, getCardColor: cardColor,getLuckyColor:luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount,getIsShowPrizeList:isShowPrizeList } = storeToRefs(globalConfig) +const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList } = storeToRefs(globalConfig) const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig) const colorPickerRef = ref() @@ -21,7 +22,7 @@ interface ThemeDaType { } const isRowCountChange = ref(0) //0未改变，1改变,2加载中 const themeValue = ref(localTheme.value.name) -const topTitleValue= ref(structuredClone(topTitle.value)) +const topTitleValue = ref(structuredClone(topTitle.value)) const cardColorValue = ref(structuredClone(cardColor.value)) const luckyCardColorValue = ref(structuredClone(luckyCardColor.value)) const textColorValue = ref(structuredClone(textColor.value)) @@ -29,6 +30,7 @@ const cardSizeValue = ref(structuredClone(cardSize.value)) const textSizeValue = ref(structuredClone(textSize.value)) const rowCountValue = ref(structuredClone(rowCount.value)) const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value)) +const patternColorValue = ref(structuredClone(patternColor.value)) const themeList = ref(Object.keys(daisyuiThemes)) const daisyuiThemeList = ref(daisyuiThemes) const formData = ref({ @@ -72,11 +74,19 @@ const resetPersonLayout = () => { const newNotPersonList = newList.slice(alreadyLen, notLen + alreadyLen) personConfig.deleteAllPerson() personConfig.addNotPersonList(newNotPersonList) - personConfig.addAlreadyPersonList(newAlreadyPersonList,null) - - isRowCountChange.value = 0 + personConfig.addAlreadyPersonList(newAlreadyPersonList, null) + + isRowCountChange.value = 0 }, 1000) } + +const clearPattern = () => { + globalConfig.setPatternList([] as number[]) +} +const resetPattern = () => { + globalConfig.resetPatternList() +} + // const handleChangeShowFields = (fieldItem: any) => { // formData.value.showField.map((item) => { // if (item.label === fieldItem.label) { @@ -97,18 +107,18 @@ watch(() => formData.value.rowCount, () => { formErr.value.rowCount = err.issues[0].message }) }) -watch(topTitleValue,(val)=>{ +watch(topTitleValue, (val) => { globalConfig.setTopTitle(val) }), -watch(themeValue, (val: any) => { - const selectedThemeDetail = daisyuiThemeList.value[val] - globalConfig.setTheme({ name: val, detail: selectedThemeDetail }) - themeChange(val) - if (selectedThemeDetail.primary && (isHex(selectedThemeDetail.primary) || isRgbOrRgba(selectedThemeDetail.primary))) { - globalConfig.setCardColor(selectedThemeDetail.primary) - } -}, { deep: true }) + watch(themeValue, (val: any) => { + const selectedThemeDetail = daisyuiThemeList.value[val] + globalConfig.setTheme({ name: val, detail: selectedThemeDetail }) + themeChange(val) + if (selectedThemeDetail.primary && (isHex(selectedThemeDetail.primary) || isRgbOrRgba(selectedThemeDetail.primary))) { + globalConfig.setCardColor(selectedThemeDetail.primary) + } + }, { deep: true }) watch(cardColorValue, (val: string) => { globalConfig.setCardColor(val) @@ -116,7 +126,9 @@ watch(cardColorValue, (val: string) => { watch(luckyCardColorValue, (val: string) => { globalConfig.setLuckyCardColor(val) }, { deep: true }) - +watch(patternColorValue, (val: string) => { + globalConfig.setPatterColor(val) +}) watch(textColorValue, (val: string) => { globalConfig.setTextColor(val) }, { deep: true }) @@ -124,9 +136,9 @@ watch(textColorValue, (val: string) => { watch(cardSizeValue, (val: { width: number; height: number; }) => { globalConfig.setCardSize(val) }, { deep: true }), -watch(isShowPrizeListValue,()=>{ - globalConfig.setIsShowPrizeList(isShowPrizeListValue.value) -}) + watch(isShowPrizeListValue, () => { + globalConfig.setIsShowPrizeList(isShowPrizeListValue.value) + }) onMounted(() => { }) @@ -183,7 +195,8 @@ onMounted(() => {
中奖卡片颜色
- + + + + +
+ +
+ +
+
+ diff --git a/src/views/Config/Global/components/PatternSetting.vue b/src/views/Config/Global/components/PatternSetting.vue new file mode 100644 index 0000000..338a85a --- /dev/null +++ b/src/views/Config/Global/components/PatternSetting.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/src/views/Config/Prize/PrizeConfig.vue b/src/views/Config/Prize/PrizeConfig.vue index 4bb5f28..20ce074 100644 --- a/src/views/Config/Prize/PrizeConfig.vue +++ b/src/views/Config/Prize/PrizeConfig.vue @@ -20,7 +20,7 @@ const addPrize = () => { id: new Date().getTime().toString(), name: '奖项', sort: 0, - isAll: true, + isAll: false, count: 1, isUsedCount:0, picture: { diff --git a/src/views/Config/index.vue b/src/views/Config/index.vue index dd409c2..0b13b3a 100644 --- a/src/views/Config/index.vue +++ b/src/views/Config/index.vue @@ -64,7 +64,7 @@ const skip = (path: string) => {