导出excel下载完成

src/page/index/PushCoinGame/game/view.js

@@ -180,7 +180,7 @@ class layout {
 		this.game.Composite.add(this.game.myWorld,
 			this.game.Bodies.fromVertices(
 				window.innerWidth / 2, window.innerHeight / 2,
-				convexPolygons,
+				_g,
 				{
 					isStatic: true,
 					scale: {

src/page/index/colorSort/index.vue

@@ -92,6 +92,14 @@
                 ref="btn2"
             >
                 排序
+            </div>
+			<div
+                class="btn"
+                @click="export2Excel"
+                :class="{ active: active3 }"
+                ref="btn3"
+            >
+                导出excel
             </div>
         </div>
     </div>
@@ -112,87 +120,88 @@ export default {
             sortedStatus: false,
             active1: false,
             active2: false,
+            active3: false,
             hlsColorArr: [],
             newColorArr: [
                 {
-                    name: "",
+					name: "红",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-                    name: "",
+					name: "紫",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-                    name: "",
+					name: "蓝紫",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-                    name: "",
+					name: "蓝",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-                    name: "",
+					name: "青",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-                    name: "",
+					name: "绿",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-                    name: "",
+					name: "黄绿",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-                    name: "",
+					name: "黄",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-                    name: "",
+					name: "橘色",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-                    name: "",
+					name: "黑",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-                    name: "",
+					name: "白",
 					data: [],
 					average: "",
 					min: "",
 					max: "",
 				},
 				{
-                    name: "",
+					name: "灰",
 					data: [],
 					average: "",
 					min: "",
@@ -237,6 +246,24 @@ export default {
                 onStart: () => {},
             });
         },
+		// 格式化json数据
+		formatJson(filterVal, jsonData) {
+			return jsonData.map(v => filterVal.map(j => v[j]))
+		},
+		// 导出excel
+		export2Excel(){
+			if (!this.active2 || !this.hideOrigin){
+				this.$Utils.showTips({
+					message: `请先分组排序...`,
+				});
+				return false
+			}
+			const tHeader = ['组名','最小值','最大值','平均值','组内全部颜色',];
+			const filterVal = ['name', 'min', 'max', 'average', 'hexArr', ];
+			const list = this.newColorArr;
+			const data = this.formatJson(filterVal, list);
+			export_json_to_excel(tHeader, data, '颜色色环分组排序');
+		},
         // 颜色数据转换为hsl
         reHandleColor() {
             // this.colorArr
@@ -283,11 +310,11 @@ export default {
                         _index = 11;
                     }
                     // 黑色
-                    if (color.l < 0.2 && color.s < 0.18) {
+					if ((color.l < 0.3 && color.s < 0.2) || color.l < 0.1) {
 						_index = 9;
 					}
 					// 白色
-                    if (color.l > 0.75 && color.s < 0.15) {
+					if ((color.l > 0.7 && color.s < 0.4) || color.l > 0.9) {
 						_index = 10;
 					}
                     this.newColorArr[_index].data.push(item);
@@ -312,35 +339,48 @@ export default {
                 if (this.hideOrigin) {
                     // 分组
                     this.newColorArr.forEach((item, index) => {
+						// 存储排序后的hex
+						let hexArr = [];
 						// 灰度区分
-                        // item = this.sortColor(item);
+						// item = this.sortColorByHSL(item);
-                        // console.log(item)
+						item.data.forEach((t, i) => {
-                        // item.forEach((t, i) => {
+							let hsl = t.hsl;
-                        // 	let rgb = t.rgb;
+							let rgb = t.rgb;
-                        // 	t.grey = rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114;
+							// t.grey = hsl.l * 10 + hsl.s * 4 + hsl.h
-                        // });
+							t.grey = rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114;
-                        // item.sort((a, b) => {
+							// console.log(t.grey)
-                        // 	let deltaGrey = b.grey - a.grey;
+							if (hsl.l > 0.8){
-                        // 	let result = deltaGrey;
+								t.grey *= 1.8;
-                        // 	return (
+							}
-                        // 		// Math.random() > 0.5 ? 1 : -1
+							if (hsl.s < 0.1){
-                        // 		result
+								t.grey *= 0.85;
-                        // 	);
+							}
-                        // });
+							if (hsl.l < 0.3 && hsl.s > 0.8) {
+								t.grey *= 0.95;
+							}
+						});
+						item.data.sort((a, b) => {
+							let deltaGrey = b.grey - a.grey;
+							return deltaGrey
+						});
+						item.data.forEach(element => {
+							hexArr.push(element.hex)
+						});
+						item.hexArr = hexArr;
 
-                        let sortedArr = this.sortColors(item.data);
+						// let sortedArr = this.sortColors(item.data);
-                        this.newColorArr[index].data = [];
+						// this.newColorArr[index].data = [];
-                        this.newColorArr[index].data.push(...sortedArr);
+						// this.newColorArr[index].data.push(...sortedArr);
 
-                        // let other = this.getOtherInfo(sortedArr);
+						// // let other = this.getOtherInfo(sortedArr);
-                        console.log(sortedArr[0]);
+						// console.log(sortedArr[0]);
-                        this.newColorArr[index].min = sortedArr[0].hex;
+						this.newColorArr[index].min = item.data[0].hex;
 						this.newColorArr[index].max =
-                            sortedArr[sortedArr.length - 1].hex;
+							item.data[item.data.length - 1].hex;
 						this.newColorArr[index].average =
-                            sortedArr[Math.ceil(sortedArr.length / 2)].hex;
+							item.data[Math.ceil(item.data.length / 2)].hex;
-                        this.newColorArr[index].name =
+						// this.newColorArr[index].name =
-                            this.newColorArr[index].average;
+						// 	this.newColorArr[index].average;
 					});
                 } else {
                     // this.hlsColorArr.sort((a, b) => {
@@ -349,7 +389,7 @@ export default {
                     this.hlsColorArr = this.sortColors(this.hlsColorArr);
                 }
 
-                this.active2 = false;
+                // this.active2 = false;
                 this.sortedStatus = true;
             }, 1000);
 
@@ -595,7 +635,7 @@ export default {
             text-align: center;
             border-radius: 20px;
             padding: 0 20px;
-            margin: 40px;
+            margin: 40px 20px;
             background: linear-gradient(315deg, #ec7070, #c75f5f);
             box-shadow: -14px -14px 28px #b15454, 14px 14px 28px #ff7e7e;
             cursor: pointer;

src/utils/plugins/Export2Excel.js

@@ -131,7 +131,7 @@ export function export_json_to_excel(th, jsonData, defaultTitle) {
     var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
 
     // 设置每列的宽度
-    ws['!cols'] = [{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100}];
+    ws['!cols'] = [{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:800},{wpx:100},{wpx:100},{wpx:100}];
     /* add worksheet to workbook */
     wb.SheetNames.push(ws_name);
     wb.Sheets[ws_name] = ws;