shaochangli/webglToy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

导出excel下载完成

Browse Source
This commit is contained in:
rucky 2022-04-02 16:59:36 +08:00
parent a36a99c1f3
commit d7fbe39db6
3 changed files with 162 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/page/index/PushCoinGame/game/view.js
View File

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

280
src/page/index/colorSort/index.vue
View File

@ -92,6 +92,14 @@
ref="btn2" ref="btn2"
> >
排序 排序
</div>
<div
class="btn"
@click="export2Excel"
:class="{ active: active3 }"
ref="btn3"
>
导出excel
</div> </div>
</div> </div>
</div> </div>
@ -112,92 +120,93 @@ export default {
sortedStatus: false, sortedStatus: false,
active1: false, active1: false,
active2: false, active2: false,
active3: false,
hlsColorArr: [], hlsColorArr: [],
newColorArr: [ newColorArr: [
{ {
name: "", name: "红",
data: [], data: [],
average: "", average: "",
min: "", min: "",
max: "", max: "",
}, },
{ {
name: "", name: "紫",
data: [], data: [],
average: "", average: "",
min: "", min: "",
max: "", max: "",
}, },
{ {
name: "", name: "蓝紫",
data: [], data: [],
average: "", average: "",
min: "", min: "",
max: "", max: "",
}, },
{ {
name: "", name: "蓝",
data: [], data: [],
average: "", average: "",
min: "", min: "",
max: "", max: "",
}, },
{ {
name: "", name: "青",
data: [], data: [],
average: "", average: "",
min: "", min: "",
max: "", max: "",
}, },
{ {
name: "", name: "绿",
data: [], data: [],
average: "", average: "",
min: "", min: "",
max: "", max: "",
}, },
{ {
name: "", name: "黄绿",
data: [], data: [],
average: "", average: "",
min: "", min: "",
max: "", max: "",
}, },
{ {
name: "", name: "黄",
data: [], data: [],
average: "", average: "",
min: "", min: "",
max: "", max: "",
}, },
{ {
name: "", name: "橘色",
data: [], data: [],
average: "", average: "",
min: "", min: "",
max: "", max: "",
}, },
{ {
name: "", name: "黑",
data: [], data: [],
average: "", average: "",
min: "", min: "",
max: "", max: "",
}, },
{ {
name: "", name: "白",
data: [], data: [],
average: "", average: "",
min: "", min: "",
max: "", max: "",
}, },
{ {
name: "", name: "灰",
data: [], data: [],
average: "", average: "",
min: "", min: "",
max: "", max: "",
}, },
], ],
sortedColorArr: [], sortedColorArr: [],
// 1-12 对应 hue 每30度 | 13 - 黑 | 14 - 白 | 15 - 灰 // 1-12 对应 hue 每30度 | 13 - 黑 | 14 - 白 | 15 - 灰
@ -237,6 +246,24 @@ export default {
onStart: () => {}, 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 // 颜色数据转换为hsl
reHandleColor() { reHandleColor() {
// this.colorArr // this.colorArr
@ -283,13 +310,13 @@ export default {
_index = 11; _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; _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; _index = 10;
} }
this.newColorArr[_index].data.push(item); this.newColorArr[_index].data.push(item);
} }
}); });
@ -312,36 +339,49 @@ export default {
if (this.hideOrigin) { if (this.hideOrigin) {
// 分组 // 分组
this.newColorArr.forEach((item, index) => { this.newColorArr.forEach((item, index) => {
// 灰度区分 // 存储排序后的hex
// item = this.sortColor(item); let hexArr = [];
// console.log(item) // 灰度区分
// item.forEach((t, i) => { // item = this.sortColorByHSL(item);
// let rgb = t.rgb; item.data.forEach((t, i) => {
// t.grey = rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114; let hsl = t.hsl;
// }); let rgb = t.rgb;
// item.sort((a, b) => { // t.grey = hsl.l * 10 + hsl.s * 4 + hsl.h
// let deltaGrey = b.grey - a.grey; t.grey = rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114;
// let result = deltaGrey; // console.log(t.grey)
// return ( if (hsl.l > 0.8){
// // Math.random() > 0.5 ? 1 : -1 t.grey *= 1.8;
// result }
// ); 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); // 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 = this.newColorArr[index].max =
sortedArr[sortedArr.length - 1].hex; item.data[item.data.length - 1].hex;
this.newColorArr[index].average = 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 { } else {
// this.hlsColorArr.sort((a, b) => { // this.hlsColorArr.sort((a, b) => {
// return b.hsl.l - a.hsl.l; // return b.hsl.l - a.hsl.l;
@ -349,7 +389,7 @@ export default {
this.hlsColorArr = this.sortColors(this.hlsColorArr); this.hlsColorArr = this.sortColors(this.hlsColorArr);
} }
this.active2 = false; // this.active2 = false;
this.sortedStatus = true; this.sortedStatus = true;
}, 1000); }, 1000);
@ -595,7 +635,7 @@ export default {
text-align: center; text-align: center;
border-radius: 20px; border-radius: 20px;
padding: 0 20px; padding: 0 20px;
margin: 40px; margin: 40px 20px;
background: linear-gradient(315deg, #ec7070, #c75f5f); background: linear-gradient(315deg, #ec7070, #c75f5f);
box-shadow: -14px -14px 28px #b15454, 14px 14px 28px #ff7e7e; box-shadow: -14px -14px 28px #b15454, 14px 14px 28px #ff7e7e;
cursor: pointer; cursor: pointer;

2
src/utils/plugins/Export2Excel.js
View File

@ -131,7 +131,7 @@ export function export_json_to_excel(th, jsonData, defaultTitle) {
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data); 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 */ /* add worksheet to workbook */
wb.SheetNames.push(ws_name); wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws; wb.Sheets[ws_name] = ws;