fix: + 代码修改 & 添加中奖概率显示页面

src/admin.html

@@ -33,6 +33,7 @@
 				align-items: center;
 			}
     </style>
+		<script src="./info.js"></script>
 	</head>
 	<body>
 		<div id="admin">
@@ -54,6 +55,7 @@
 				<div class="btn-box">
 					<div><button style="margin-left: 50px" onclick="submit()">打开抽奖页面</button></div>
 					<div><button style="margin-left: 50px" onclick="window.open('./list.html')">打开中奖人员名单</button></div>
+					<div><button style="margin-left: 50px" onclick="window.open('./data.html')">百万次人均中奖次数展示</button></div>
 					<div><button style="margin-left: 50px" onclick="window.open('./lottery.html?num=10&title=一等奖&info=奖品：macpro一部')">一等奖</button></div>
 					<div><button style="margin-left: 50px" onclick="window.open('./lottery.html?num=20&title=二等奖&info=奖品：mac air一部')">二等奖</button></div>
 					<div><button style="margin-left: 50px" onclick="window.open('./lottery.html?num=30&title=三等奖&info=奖品：iphone 12一部')">三等奖</button></div>
@@ -62,18 +64,18 @@
 		</div>
 		<script>
 			function submit() {
-        let winPerson = localStorage.getItem('yit') ? JSON.parse(localStorage.getItem('yit')) : {}
         let num = document.getElementById('num').value;
-				let title = document.getElementById('title').value;
+				let title = document.getElementById('title').value.trim();
 				let info = document.getElementById('info').value;
-        if(winPerson[title]) {
-          let status = window.confirm('该标题已存在，跳转至抽奖结果页面')
-          status && window.open('./list.html')
+        let winPerson = localStorage.getItem('yit') ? JSON.parse(localStorage.getItem('yit')) : {};
+				if (winPerson[title]) {
+					let status = window.confirm('该标题已存在，跳转至抽奖结果页面');
+					status && window.open('./list.html');
 				} else {
 					if (num && title) {
 						window.open(`./lottery.html?num=${num}&title=${title}&info=${info}`);
 					} else {
-            alert('请输入人数和标题')
+						alert('请输入人数和标题');
 					}
 				}
 			}

src/data.html

+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>百万次人均中奖次数展示</title>
+		<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
+		<link rel="stylesheet" href="./style/common.css" />
+		<script src="./vue.js"></script>
+		<script src="./info.js"></script>
+	</head>
+	<body>
+		<div id="app">
+			<div class="list-item" >
+				<h3 class="title">百万次人均中奖次数展示</h3>
+				<div class="jump-box" style="margin-left: 20px">
+					<div v-for="it in personList" class="jump-item">{{it.name}} {{it.times}}</div>
+				</div>
+			</div>
+		</div>
+		<script>
+			let dataVue = new Vue({
+				el: '#app',
+				data: () => {
+					return {
+						personList: [],
+					};
+				},
+				created() {
+					setTimeout(() => {
+						this.personList = this.stressTest();
+					}, 0)
+				},
+				methods: {
+					getRandomPerson(num = 1) {
+						let candidateList = [...allPersonInfoMap.values()];
+						if (num > candidateList.length) {
+							num = candidateList.length;
+						}
+						// 该批次名单
+						let currentWinPersonMap = new Map();
+						while (currentWinPersonMap.size < num) {
+							let random = Math.floor(Math.random() * candidateList.length);
+							currentWinPersonMap.set(candidateList[random]['name'], candidateList[random]);
+						}
+						return [...currentWinPersonMap.values()];
+					},
+					stressTest(times = 100 * 10000) {
+						let map = new Map();
+						let index = 0;
+						for (; index < times; index++) {
+							let { name } = this.getRandomPerson()[0];
+							if (map.has(name)) {
+								map.set(
+									name,
+									Object.assign({}, map.get(name), {
+										[times]: (map.get(name)[times] || 0) + 1,
+									})
+								);
+							} else {
+								map.set(
+									name,
+									Object.assign({}, map.get(name), {
+										[times]: 1,
+									})
+								);
+							}
+						}
+
+						let list = [];
+						let data = [...map.entries()];
+						for (const key in data) {
+							list.push({
+								name: data[key][0],
+								times: data[key][1][times],
+							});
+						}
+						return list.sort((a, b) => a.times - b.times);
+					},
+				},
+			});
+		</script>
+	</body>
+</html>

src/info.js

-const personInfoList = [
+const allpersonInfoList = [
 		{ "name": "朱楠", "firstLevelDepartment": "内容事业部" },
 		{ "name": "王君", "firstLevelDepartment": "新零售事业部" },
 		{ "name": "王雯丽", "firstLevelDepartment": "内容事业部" },
@@ -452,9 +452,9 @@ const personInfoList = [
 		{ "name": "徐沪生", "firstLevelDepartment": "总裁办" }
 ]
 
-const personInfoMap = (() => {
+const allPersonInfoMap = (() => {
 	let map = new Map()
-	personInfoList.forEach(val => {
+	allpersonInfoList.forEach(val => {
 		map.set(val.name, val)
 	})
 	return map

src/lottery.html

@@ -17,7 +17,7 @@
 				<div class="info" v-if="awardInfo">奖品：{{awardInfo}}</div>
 			</div>
 			<div v-if="step !== 1" class="step2">
-				<h3>幸运员工&nbsp;&nbsp;({{statusText}})</h3>
+				<h3>幸运员工&nbsp;&nbsp;({{lotteryStatus ? '抽奖完成' : '抽奖中...'}})</h3>
 				<div class="jump-box">
 					<div v-for="item in activePersonList" class="jump-item">{{item.name}} {{item.firstLevelDepartment}}</div>
 				</div>

src/lottery.js

-/**
+let vue = new Vue({
+	el: '#v1',
+	data: () => {
+		return {
+			awardTitle: '', // 标题
+			awardInfo: '', // 奖品信息
+			step: 1, // 控制页面显示 1 显示中奖标题模块 2 抽奖页面
+			activePersonList: [], // 中奖列表
+			winPersonList: {}, // 中奖人员名单 列表页面
+			interval: null,
+			num: 0, // 抽奖人数
+			lotteryStatus: false,
+			candidateMap: null, // 未中奖人员集合
+		};
+	},
+	created() {
+		this.init();
+	},
+	watch: {
+		step(newValue) {
+			if (newValue === 2) {
+				this.start(this.num);
+			}
+		},
+	},
+	methods: {
+		/**
+		 * 初始化
+		 */
+		init() {
+			this.winPersonList = JSON.parse(localStorage.getItem('yit') || '{}');
+			let urlParams = window.decodeURI(location.href).split('?')[1]?.split('&');
+			let params = {};
+			if (urlParams) {
+				urlParams.forEach(val => {
+					let v = val.split('=');
+					params[v[0]] = v[1];
+				});
+				this.num = params.num;
+				this.awardTitle = params.title;
+				this.awardInfo = params.info;
+			}
+		},
+
+		/**
 		 *
 		 * @param {*} status true: 把中奖名单删除
 		 */
-function randomNPerson(num, candidateMap) {
-	let candidateList = [...candidateMap.values()];
-	if (num > candidateList.length) {
-		num = candidateList.length;
+		getRandomPerson() {
+			let candidateList = [...this.candidateMap.values()];
+			if (this.num > candidateList.length) {
+				this.num = candidateList.length;
 			}
 			// 该批次名单
 			let currentWinPersonMap = new Map();
-	while (currentWinPersonMap.size < num) {
+			while (currentWinPersonMap.size < this.num) {
 				let random = Math.floor(Math.random() * candidateList.length);
 				currentWinPersonMap.set(candidateList[random]['name'], candidateList[random]);
 				candidateList.splice(random, 1); // 删除中奖人员名单
 			}
 			return [...currentWinPersonMap.values()];
-}
+		},
 
-/**
+		/**
 		 * 获取所有未中过奖名单
 		 */
-function getCandidateMap() {
-	let winPerson = localStorage.getItem('yit');
-	if (winPerson) {
-		winPerson = JSON.parse(winPerson);
+		getCandidateMap() {
+			let winPersonStr = localStorage.getItem('yit');
+			this.candidateMap = new Map();
+			[...allPersonInfoMap.keys()].forEach(k => this.candidateMap.set(k, allPersonInfoMap.get(k)));
+			if (winPersonStr) {
+				let winPerson = JSON.parse(winPersonStr);
 				for (const key in winPerson) {
 					winPerson[key].forEach(val => {
-				personInfoMap.delete(val.name);
+						this.candidateMap.delete(val.name);
 					});
 				}
 			}
-	return personInfoMap;
-}
+		},
 
-/**
+		/**
 		 * 抽奖开始
 		 */
-function start(num) {
-	var candidateMap = getCandidateMap();
-	if (candidateMap.size === 0) {
+		start() {
+			this.getCandidateMap();
+			let activePersonList = [];
+			if (this.candidateMap.size === 0) {
 				let status = window.confirm('没有未中奖人员, 去往抽奖结果页面');
 				if (status) {
 					window.open('./list.html');
 				} else {
-		    vue.activePersonList = [];
-		    vue.step = 1;
-		    vue.statusText = '抽奖完成';
+					this.step = 1;
+					activePersonList = [];
+					this.lotteryStatus = false;
 				}
 				return;
 			}
-	vue.interval = setInterval(() => {
-		vue.activePersonList = randomNPerson(num, candidateMap);
+			this.interval = setInterval(() => {
+				this.activePersonList = this.getRandomPerson();
 			}, 100);
-}
+		},
 
-/**
+		/**
 		 *
 		 *  抽奖结束
 		 */
-function end() {
+		end() {
 			let winPerson = {};
-	let activePersonList = getLotteryList(true);
+			let activePersonList = this.getRandomPerson();
 			if (localStorage.getItem('yit')) {
 				winPerson = JSON.parse(localStorage.getItem('yit'));
 			}
-	winPerson[vue.awardTitle] = activePersonList;
+			winPerson[this.awardTitle] = activePersonList;
 			localStorage['yit'] = JSON.stringify(winPerson);
-	vue.activePersonList = activePersonList;
-}
+			this.activePersonList = activePersonList;
+		},
+	},
+});
 
 /**
  *
@@ -81,51 +129,9 @@ function next(event) {
 			if (vue.interval) {
 				clearInterval(vue.interval);
 				vue.interval = null;
-				vue.statusText = '抽奖完成';
-				end();
+				vue.lotteryStatus = true;
+				vue.end();
 			}
 		}
 	}
 }
-
-let vue = new Vue({
-	el: '#v1',
-	data: () => {
-		return {
-			awardTitle: '', // 标题
-			awardInfo: '', // 奖品信息
-			step: 1, // 控制页面显示 1 显示中奖标题模块 2 抽奖页面
-			activePersonList: [], // 中奖列表
-			winPersonList: {}, // 中奖人员名单 列表页面
-			interval: null,
-			num: 0, // 抽奖人数
-			statusText: '抽奖中...',
-		};
-	},
-	created() {
-		this.init()
-	},
-	watch: {
-		step(newValue) {
-			if (newValue === 2) {
-				start(this.num);
-			}
-		},
-	},
-	methods: {
-		init() {
-			this.winPersonList = JSON.parse(localStorage.getItem('yit') || '{}');
-			let urlParams = window.decodeURI(location.href).split('?')[1]?.split('&');
-			let params = {};
-			if (urlParams) {
-				urlParams.forEach(val => {
-					let v = val.split('=');
-					params[v[0]] = v[1];
-				});
-				this.num = params.num;
-				this.awardTitle = params.title;
-				this.awardInfo = params.info;
-			}
-		},
-	},
-});

src/style/common.css

-html, body {
+html,
+body {
 	width: 100%;
 }
 * {
@@ -21,7 +22,8 @@ html, body {
 	flex-direction: column;
 }
 
-.title, .info {
+.title,
+.info {
 	text-align: center;
 }
 .title {
@@ -35,7 +37,7 @@ html, body {
 }
 
 .step2 {
-  padding-top: 35vh;;
+	padding-top: 35vh;
 	width: 100%;
 	text-align: center;
 }
@@ -63,3 +65,42 @@ html, body {
 .list-item:nth-child(1) h3 {
 	padding-top: 30px;
 }
+
+.loading {
+	width: 80px;
+	height: 40px;
+	margin: 0 auto;
+	margin-top: 100px;
+}
+.loading span {
+	display: inline-block;
+	width: 8px;
+	height: 100%;
+	border-radius: 4px;
+	background: lightgreen;
+	-webkit-animation: load 1s ease infinite;
+}
+@-webkit-keyframes load {
+	0%,
+	100% {
+		height: 40px;
+		background: lightgreen;
+	}
+	50% {
+		height: 70px;
+		margin: -15px 0;
+		background: lightblue;
+	}
+}
+.loading span:nth-child(2) {
+	-webkit-animation-delay: 0.2s;
+}
+.loading span:nth-child(3) {
+	-webkit-animation-delay: 0.4s;
+}
+.loading span:nth-child(4) {
+	-webkit-animation-delay: 0.6s;
+}
+.loading span:nth-child(5) {
+	-webkit-animation-delay: 0.8s;
+}