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.Bodies.fromVertices(
window.innerWidth / 2, window.innerHeight / 2,
convexPolygons,
_g,
{
isStatic: true,
scale: {

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

@ -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);
// 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
// );
// });
// 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;
// // let other = this.getOtherInfo(sortedArr);
// console.log(sortedArr[0]);
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;
this.newColorArr[index].name =
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) => {
@ -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;

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);
// 设置每列的宽度
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;