导出excel下载完成
This commit is contained in:
rucky
parent
a36a99c1f3
commit
d7fbe39db6
@ -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: {
|
||||
|
||||
@ -92,6 +92,14 @@
|
||||
ref="btn2"
|
||||
>
|
||||
排序
|
||||
</div>
|
||||
<div
|
||||
class="btn"
|
||||
@click="export2Excel"
|
||||
:class="{ active: active3 }"
|
||||
ref="btn3"
|
||||
>
|
||||
导出excel
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user