diff --git a/src/page/index/PushCoinGame/game/view.js b/src/page/index/PushCoinGame/game/view.js index 58b0b6e..49a09ce 100644 --- a/src/page/index/PushCoinGame/game/view.js +++ b/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: { diff --git a/src/page/index/colorSort/index.vue b/src/page/index/colorSort/index.vue index ae28335..56e6750 100644 --- a/src/page/index/colorSort/index.vue +++ b/src/page/index/colorSort/index.vue @@ -92,6 +92,14 @@ ref="btn2" > 排序 + +
+ 导出excel
@@ -112,92 +120,93 @@ export default { sortedStatus: false, active1: false, active2: false, + active3: false, hlsColorArr: [], 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: "", - }, + 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 - 灰 @@ -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,13 +310,13 @@ export default { _index = 11; } // 黑色 - if (color.l < 0.2 && color.s < 0.18) { - _index = 9; - } - // 白色 - if (color.l > 0.75 && color.s < 0.15) { - _index = 10; - } + if ((color.l < 0.3 && color.s < 0.2) || color.l < 0.1) { + _index = 9; + } + // 白色 + if ((color.l > 0.7 && color.s < 0.4) || color.l > 0.9) { + _index = 10; + } this.newColorArr[_index].data.push(item); } }); @@ -312,36 +339,49 @@ export default { if (this.hideOrigin) { // 分组 this.newColorArr.forEach((item, index) => { - // 灰度区分 - // item = this.sortColor(item); - // console.log(item) - // item.forEach((t, i) => { - // let rgb = t.rgb; - // t.grey = rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114; - // }); - // item.sort((a, b) => { - // let deltaGrey = b.grey - a.grey; - // let result = deltaGrey; - // return ( - // // Math.random() > 0.5 ? 1 : -1 - // result - // ); - // }); + // 存储排序后的hex + let hexArr = []; + // 灰度区分 + // item = this.sortColorByHSL(item); + item.data.forEach((t, i) => { + let hsl = t.hsl; + let rgb = t.rgb; + // t.grey = hsl.l * 10 + hsl.s * 4 + hsl.h + t.grey = rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114; + // console.log(t.grey) + if (hsl.l > 0.8){ + t.grey *= 1.8; + } + if (hsl.s < 0.1){ + 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); - this.newColorArr[index].data = []; - this.newColorArr[index].data.push(...sortedArr); + // let sortedArr = this.sortColors(item.data); + // this.newColorArr[index].data = []; + // 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; - }); + // // let other = this.getOtherInfo(sortedArr); + // console.log(sortedArr[0]); + this.newColorArr[index].min = item.data[0].hex; + this.newColorArr[index].max = + item.data[item.data.length - 1].hex; + this.newColorArr[index].average = + item.data[Math.ceil(item.data.length / 2)].hex; + // this.newColorArr[index].name = + // this.newColorArr[index].average; + }); } else { // this.hlsColorArr.sort((a, b) => { // return b.hsl.l - a.hsl.l; @@ -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; diff --git a/src/utils/plugins/Export2Excel.js b/src/utils/plugins/Export2Excel.js index f478e4c..fa5ac97 100644 --- a/src/utils/plugins/Export2Excel.js +++ b/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;