更新颜色排序 显示最大值中间值和最小值

src/page/index/colorSort/index.vue

@@ -22,13 +22,30 @@
 				v-for="(item, index) in newColorArr"
 				:key="index"
 			>
-				<div class="header">Group {{ index + 1 }}</div>
+				<div class="header">Group {{item.name}}</div>
-				<div
+				<div class="spans">
-					class="color-span"
+					<div
-					v-for="(t, i) in item"
+						class="color-span"
-					:key="i"
+						v-for="(t, i) in item.data"
-					:style="rennderCssHSL(t)"
+						:key="i"
-				></div>
+						:style="rennderCssHSL(t)"
+					></div>
+				</div>
+				
+				<div class="desc" v-if="sortedStatus">
+					<div class="row">
+						<p>最小值: {{item.min}}</p>  
+						<div class="color-span" :style="rennderCssHex(item.min)"></div>
+					</div>
+					<div class="row">
+						<p>平均值: {{item.average}}</p>  
+						<div class="color-span" :style="rennderCssHex(item.average)"></div>
+					</div>
+					<div class="row">
+						<p>最大值: {{item.max}}</p>  
+						<div class="color-span" :style="rennderCssHex(item.max)"></div>
+					</div>
+				</div>
 			</div>
 		</div>
 		<div class="btn-groups">
@@ -83,10 +100,95 @@ export default {
 		return {
 			hideOrigin: false,
 			colorArr: colors,
+			sortedStatus: false,
 			active1: false,
 			active2: false,
 			hlsColorArr: [],
-			newColorArr: [[], [], [], [], [], [], [], [], [], [], [], []],
+			newColorArr: [
+				{
+					name: '',
+					data: [],
+					average: '',
+					min: '',
+					max: '',
+				},
+				{
+					name: '',
+					data: [],
+					average: '',
+					min: '',
+					max: '',
+				},
+				{
+					name: '',
+					data: [],
+					average: '',
+					min: '',
+					max: '',
+				},
+				{
+					name: '',
+					data: [],
+					average: '',
+					min: '',
+					max: '',
+				},
+				{
+					name: '',
+					data: [],
+					average: '',
+					min: '',
+					max: '',
+				},
+				{
+					name: '',
+					data: [],
+					average: '',
+					min: '',
+					max: '',
+				},
+				{
+					name: '',
+					data: [],
+					average: '',
+					min: '',
+					max: '',
+				},
+				{
+					name: '',
+					data: [],
+					average: '',
+					min: '',
+					max: '',
+				},{
+					name: '',
+					data: [],
+					average: '',
+					min: '',
+					max: '',
+				},
+				{
+					name: '',
+					data: [],
+					average: '',
+					min: '',
+					max: '',
+				},
+				{
+					name: '',
+					data: [],
+					average: '',
+					min: '',
+					max: '',
+				},
+				{
+					name: '',
+					data: [],
+					average: '',
+					min: '',
+					max: '',
+				},
+			],
 			sortedColorArr: [],
 			// 1-12 对应 hue 每30度  | 13 - 黑 | 14 - 白 | 15 - 灰
 			balance: [0.9, 0, 0.01],
@@ -103,7 +205,7 @@ export default {
 		},
 		rennderCssHex() {
 			return function (item) {
-				return `background-color: ${item.csshsl};`;
+				return `background-color: ${item};`;
 			};
 		},
 		rennderHeaderCss() {
@@ -123,13 +225,6 @@ export default {
 				x: this.hideOrigin ? 0 : "100%",
 				zIndex: this.hideOrigin ? 2 : 10,
 				onStart: () => {
-					this.active2 = false;
-					// if (this.active1) {
-					// 	this.sortColorSaturation();
-					// }
-					// if (this.active2) {
-					// 	this.sortColorLight();
-					// }
 				},
 			});
 		},
@@ -186,36 +281,17 @@ export default {
 					if (color.l > 0.75 && color.s < 0.15) {
 						_index = 10;
 					}
-					this.newColorArr[_index].push(item);
+					this.newColorArr[_index].data.push(item);
 				}
 			});
 			// console.log(this.newColorArr);
 		},
-		// 根据饱和度排序
-		sortColorSaturation() {
-			this.active1 = true;
-			this.active2 = false;
-			if (this.hideOrigin) {
-				// 分组
-				this.newColorArr.forEach((item, index) => {
-					item.sort((a, b) => {
-						return b.hsl.s - a.hsl.s;
-					});
-				});
-			} else {
-				this.hlsColorArr.sort((a, b) => {
-					return b.hsl.s - a.hsl.s;
-				});
-			}
-
-			console.log(this.newColorArr);
-		},
 		// 根据亮度
 		sortColorLight() {
 			this.active2 = true;
 			this.caclulTime++;
 			this.$Utils.showTips({
-				message: `正在第${this.caclulTime}次计算，请稍等...<br/>再次点击排序按钮<br/>可重复计算优化排序`,
+				message: `正在计算，请稍等...`,
 			});
 
 			setTimeout(() => {
@@ -238,9 +314,16 @@ export default {
 						// 	);
 						// });
 
-						this.newColorArr[index] = [];
+						let sortedArr = this.sortColors(item.data);
-						let sortedArr = this.sortColors(item);
+						this.newColorArr[index].data = [];
-						this.newColorArr[index].push(...sortedArr);
+						this.newColorArr[index].data.push(...sortedArr);
+
+						// let other = this.getOtherInfo(sortedArr);
+						console.log(sortedArr[0])
+						this.newColorArr[index].min = sortedArr[0].hex;
+						this.newColorArr[index].max = sortedArr[sortedArr.length-1].hex;
+						this.newColorArr[index].average = sortedArr[Math.ceil(sortedArr.length/2)].hex;
+						this.newColorArr[index].name = this.newColorArr[index].average
 					});
 				} else {
 					// this.hlsColorArr.sort((a, b) => {
@@ -250,6 +333,7 @@ export default {
 				}
 
 				this.active2 = false;
+				this.sortedStatus = true;
 			}, 1000);
 
 			// console.log(this.newColorArr);
@@ -319,6 +403,9 @@ export default {
 			for (let i = 0; i < colors.length; i++) {
 				distances[i] = [];
 				for (let j = 0; j < i; j++) {
+					// if (colors[i].hex === colors[j].hex){
+					// 	console.log('相同',colors[i].hex)
+					// }
 					distances.push([
 						colors[i],
 						colors[j],
@@ -333,7 +420,7 @@ export default {
 			// Put each color into separate cluster initially
 			const colorToCluster = {};
 			for (let i = 0; i < colors.length; i++) {
-				colorToCluster[colors[i].int] = [colors[i]];
+				colorToCluster[colors[i].hex] = [colors[i]];
 			}
 
 			// Merge clusters, starting with lowest distances
@@ -342,8 +429,8 @@ export default {
 				const color1 = distances[i][0];
 				const color2 = distances[i][1];
 
-				const cluster1 = colorToCluster[color1 && color1.int];
+				const cluster1 = colorToCluster[color1 && color1.hex];
-				const cluster2 = colorToCluster[color2 && color2.int];
+				const cluster2 = colorToCluster[color2 && color2.hex];
 
 				if (!cluster1 || !cluster2 || cluster1 === cluster2) {
 					continue;
@@ -362,10 +449,10 @@ export default {
 
 				// Merge cluster2 into cluster1
 				cluster1.push(...cluster2);
-				delete colorToCluster[color1.int];
+				delete colorToCluster[color1.hex];
-				delete colorToCluster[color2.int];
+				delete colorToCluster[color2.hex];
-				colorToCluster[cluster1[0].int] = cluster1;
+				colorToCluster[cluster1[0].hex] = cluster1;
-				colorToCluster[cluster1[cluster1.length - 1].int] = cluster1;
+				colorToCluster[cluster1[cluster1.length - 1].hex] = cluster1;
 				lastCluster = cluster1;
 			}
 			console.log("sorted length =", lastCluster.length);
@@ -411,7 +498,7 @@ export default {
 				flex-wrap: wrap;
 				.header {
 					.prLayout(100%,60px);
-					margin: 100px 0 50px 0;
+					margin: 0 0 0px 0;
 					line-height: 50px;
 					text-indent: 10px;
 					font-size: 30px;
@@ -427,6 +514,34 @@ export default {
 						.prLayout(30px,30px);
 					}
 				}
+				.spans{
+					.prLayout(100%,auto);
+					display: flex;
+					flex-direction: row;
+					align-content: center;
+					align-items: center;
+					flex-wrap: wrap;
+				}
+				.desc{
+					padding: 20px;
+					display: flex;
+					flex-direction: column;
+					align-content: center;
+					align-items: center;
+					flex-wrap: wrap;
+					.row{
+						.prLayout(100%,60px);
+						line-height: 60px;
+						display: flex;
+						flex-direction: row;
+						align-content: center;
+						align-items: center;
+						p{
+							width: 200px;
+							margin-right: 20px;
+						}
+					}
+				}
 				&::nth-first {
 					.header {
 						margin-top: 0;

src/page/index/router/index.js

@@ -119,7 +119,7 @@ const routes = [
 		name: "ColorSort",
 		component: ColorSort,
 		meta: {
-			title: "Color Sort", // 标题
+			title: "Color Sorting", // 标题
 			keepAlive: false, // 是否保持活跃
 		},
 	},