Compare commits
2 Commits
8507d848b4
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d7fbe39db6 | ||
| a36a99c1f3 |
@@ -20,6 +20,7 @@
|
|||||||
"eslint-config-standard": "^14.1.1",
|
"eslint-config-standard": "^14.1.1",
|
||||||
"eslint-plugin-promise": "^4.2.1",
|
"eslint-plugin-promise": "^4.2.1",
|
||||||
"eslint-plugin-standard": "^4.0.1",
|
"eslint-plugin-standard": "^4.0.1",
|
||||||
|
"file-saver": "^2.0.5",
|
||||||
"global": "^4.4.0",
|
"global": "^4.4.0",
|
||||||
"good-storage": "^1.1.1",
|
"good-storage": "^1.1.1",
|
||||||
"gsap": "^3.5.1",
|
"gsap": "^3.5.1",
|
||||||
@@ -30,6 +31,7 @@
|
|||||||
"postcss-px2rem-exclude": "^0.0.6",
|
"postcss-px2rem-exclude": "^0.0.6",
|
||||||
"postcss-viewport-units": "^0.1.6",
|
"postcss-viewport-units": "^0.1.6",
|
||||||
"px2rem-loader": "^0.1.9",
|
"px2rem-loader": "^0.1.9",
|
||||||
|
"script-loader": "^0.7.2",
|
||||||
"style-resources-loader": "^1.3.3",
|
"style-resources-loader": "^1.3.3",
|
||||||
"swiper": "^6.2.0",
|
"swiper": "^6.2.0",
|
||||||
"tinyimg-webpack-plugin": "^0.0.5",
|
"tinyimg-webpack-plugin": "^0.0.5",
|
||||||
@@ -41,7 +43,8 @@
|
|||||||
"vue-slider-component": "^3.2.11",
|
"vue-slider-component": "^3.2.11",
|
||||||
"vuex": "^3.4.0",
|
"vuex": "^3.4.0",
|
||||||
"webpack-glsl-loader": "^1.0.1",
|
"webpack-glsl-loader": "^1.0.1",
|
||||||
"wx-jssdk": "^0.0.7"
|
"wx-jssdk": "^0.0.7",
|
||||||
|
"xlsx": "^0.18.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.13.14",
|
"@babel/core": "^7.13.14",
|
||||||
|
|||||||
@@ -40,6 +40,151 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="shadow" ref="shadow" :class="shown ? 'shown' : ''"></div>
|
<div class="shadow" ref="shadow" :class="shown ? 'shown' : ''"></div>
|
||||||
|
<div class="background">
|
||||||
|
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
|
||||||
|
<defs>
|
||||||
|
<radialGradient
|
||||||
|
id="Gradient1"
|
||||||
|
cx="50%"
|
||||||
|
cy="50%"
|
||||||
|
fx="10%"
|
||||||
|
fy="50%"
|
||||||
|
r=".5"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="fx"
|
||||||
|
dur="34s"
|
||||||
|
values="0%;3%;0%"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
<stop offset="0%" stop-color="#ff0" />
|
||||||
|
<stop offset="100%" stop-color="#ff00" />
|
||||||
|
</radialGradient>
|
||||||
|
<radialGradient
|
||||||
|
id="Gradient2"
|
||||||
|
cx="50%"
|
||||||
|
cy="50%"
|
||||||
|
fx="10%"
|
||||||
|
fy="50%"
|
||||||
|
r=".5"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="fx"
|
||||||
|
dur="23.5s"
|
||||||
|
values="0%;3%;0%"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
<stop offset="0%" stop-color="#0ff" />
|
||||||
|
<stop offset="100%" stop-color="#0ff0" />
|
||||||
|
</radialGradient>
|
||||||
|
<radialGradient
|
||||||
|
id="Gradient3"
|
||||||
|
cx="50%"
|
||||||
|
cy="50%"
|
||||||
|
fx="50%"
|
||||||
|
fy="50%"
|
||||||
|
r=".5"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="fx"
|
||||||
|
dur="21.5s"
|
||||||
|
values="0%;3%;0%"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
<stop offset="0%" stop-color="#f0f" />
|
||||||
|
<stop offset="100%" stop-color="#f0f0" />
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
<rect
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
fill="url(#Gradient1)"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="x"
|
||||||
|
dur="20s"
|
||||||
|
values="25%;0%;25%"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
<animate
|
||||||
|
attributeName="y"
|
||||||
|
dur="21s"
|
||||||
|
values="0%;25%;0%"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
<animateTransform
|
||||||
|
attributeName="transform"
|
||||||
|
type="rotate"
|
||||||
|
from="0 50 50"
|
||||||
|
to="360 50 50"
|
||||||
|
dur="17s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
<rect
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
fill="url(#Gradient2)"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="x"
|
||||||
|
dur="23s"
|
||||||
|
values="-25%;0%;-25%"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
<animate
|
||||||
|
attributeName="y"
|
||||||
|
dur="24s"
|
||||||
|
values="0%;50%;0%"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
<animateTransform
|
||||||
|
attributeName="transform"
|
||||||
|
type="rotate"
|
||||||
|
from="0 50 50"
|
||||||
|
to="360 50 50"
|
||||||
|
dur="18s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
<rect
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
fill="url(#Gradient3)"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="x"
|
||||||
|
dur="25s"
|
||||||
|
values="0%;25%;0%"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
<animate
|
||||||
|
attributeName="y"
|
||||||
|
dur="26s"
|
||||||
|
values="0%;25%;0%"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
<animateTransform
|
||||||
|
attributeName="transform"
|
||||||
|
type="rotate"
|
||||||
|
from="360 50 50"
|
||||||
|
to="0 50 50"
|
||||||
|
dur="19s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
</svg>
|
||||||
|
<h1>
|
||||||
|
Rucky's<br />
|
||||||
|
Toy.
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@@ -241,6 +386,13 @@ export default {
|
|||||||
// 6px -18px 40px #f5c5cb inset, 11px -18px 40px #f0c1ef inset,
|
// 6px -18px 40px #f5c5cb inset, 11px -18px 40px #f0c1ef inset,
|
||||||
// 22px 7px 40px #d3c1f8 inset, 13px 17px 40px #c2c6fd inset;
|
// 22px 7px 40px #d3c1f8 inset, 13px 17px 40px #c2c6fd inset;
|
||||||
}
|
}
|
||||||
|
.background {
|
||||||
|
opacity: 0.15;
|
||||||
|
.paLayout(0,0,100%,100%,0);
|
||||||
|
svg {
|
||||||
|
.prLayout(100%,100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
.page__hd {
|
.page__hd {
|
||||||
padding: 30px 0 180px 0px !important;
|
padding: 30px 0 180px 0px !important;
|
||||||
h1,
|
h1,
|
||||||
@@ -248,7 +400,10 @@ export default {
|
|||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
mix-blend-mode: overlay;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.dialog {
|
.dialog {
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { gsap } from "gsap";
|
|||||||
import Resource from "./preload";
|
import Resource from "./preload";
|
||||||
import utils from '@/utils/index.js';
|
import utils from '@/utils/index.js';
|
||||||
import Matter from 'matter-js';
|
import Matter from 'matter-js';
|
||||||
|
import decomp from 'poly-decomp';
|
||||||
|
|
||||||
|
|
||||||
class game {
|
class game {
|
||||||
@@ -50,6 +51,7 @@ class game {
|
|||||||
this.Runner = Matter.Runner,
|
this.Runner = Matter.Runner,
|
||||||
this.Bodies = Matter.Bodies,
|
this.Bodies = Matter.Bodies,
|
||||||
this.Composite = Matter.Composite;
|
this.Composite = Matter.Composite;
|
||||||
|
Matter.Common.setDecomp(decomp)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化
|
// 初始化
|
||||||
@@ -190,7 +192,7 @@ class game {
|
|||||||
console.log(this.globalSpeed)
|
console.log(this.globalSpeed)
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
// 初始化物理引擎
|
||||||
initMatterEngine() {
|
initMatterEngine() {
|
||||||
// create an engine
|
// create an engine
|
||||||
this.myEngine = this.Engine.create();
|
this.myEngine = this.Engine.create();
|
||||||
@@ -198,14 +200,15 @@ class game {
|
|||||||
this.myWorld = this.myEngine.world;
|
this.myWorld = this.myEngine.world;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// create a renderer
|
// create a renderer
|
||||||
this.myRender = this.Render.create({
|
this.myRender = this.Render.create({
|
||||||
// element: this.vue.$refs.container,
|
// element: this.vue.$refs.container,
|
||||||
engine: this.myEngine,
|
engine: this.myEngine,
|
||||||
canvas: this.vue.$refs.matter,
|
canvas: this.vue.$refs.matter,
|
||||||
options: {
|
options: {
|
||||||
width: 375, //window.innerWidth,
|
width: 375,// 375, //window.innerWidth,
|
||||||
height: 812, //window.innerHeight,
|
height: 812, //812, //window.innerHeight,
|
||||||
pixelRatio: 1, // 设置像素比 window.devicePixelRatio
|
pixelRatio: 1, // 设置像素比 window.devicePixelRatio
|
||||||
background: 'transparent',
|
background: 'transparent',
|
||||||
wireframeBackground: "transparent",
|
wireframeBackground: "transparent",
|
||||||
|
|||||||
@@ -79,10 +79,18 @@ class creater {
|
|||||||
//屏幕自适应
|
//屏幕自适应
|
||||||
adaptScreen() {
|
adaptScreen() {
|
||||||
if (this.app.needAdaptScreen === false) return
|
if (this.app.needAdaptScreen === false) return
|
||||||
|
// 横屏模式
|
||||||
|
if (window.innerWidth > window.innerHeight) {
|
||||||
|
this.currentStageWidth = window.innerWidth;
|
||||||
|
this.currentStageHeight = window.innerHeight;
|
||||||
|
this.currentWidthHeightScale = this.currentStageWidth / this.currentStageHeight;
|
||||||
|
this.offsetTop = 0;
|
||||||
|
} else {
|
||||||
this.currentStageWidth = window.innerWidth;
|
this.currentStageWidth = window.innerWidth;
|
||||||
this.currentStageHeight = 1624 / 750 * window.innerWidth;
|
this.currentStageHeight = 1624 / 750 * window.innerWidth;
|
||||||
this.currentWidthHeightScale = this.currentStageWidth / this.currentStageHeight;
|
this.currentWidthHeightScale = this.currentStageWidth / this.currentStageHeight;
|
||||||
|
this.offsetTop = (window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY;
|
||||||
|
}
|
||||||
if (this.currentStageWidth > this.currentStageHeight) {
|
if (this.currentStageWidth > this.currentStageHeight) {
|
||||||
if (this.initWidthHeightScale < this.currentWidthHeightScale)
|
if (this.initWidthHeightScale < this.currentWidthHeightScale)
|
||||||
this.stageCanvas.scaleX = this.stageCanvas.scaleY = this.currentStageWidth / this.initStageWidth;
|
this.stageCanvas.scaleX = this.stageCanvas.scaleY = this.currentStageWidth / this.initStageWidth;
|
||||||
@@ -98,13 +106,13 @@ class creater {
|
|||||||
this.stage.x = 0//(this.currentStageWidth - this.initStageWidth) * this.stageCanvas.scaleX / 2;
|
this.stage.x = 0//(this.currentStageWidth - this.initStageWidth) * this.stageCanvas.scaleX / 2;
|
||||||
this.stage.y = 0//(window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY / 2;
|
this.stage.y = 0//(window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY / 2;
|
||||||
|
|
||||||
this.offsetTop = (window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY;
|
|
||||||
|
|
||||||
if (window.innerHeight < this.currentStageHeight)
|
if (window.innerHeight < this.currentStageHeight)
|
||||||
gsap.set(this.stageCanvas, { y: this.offsetTop }); //+ (window.deviceInfo.screenSize <= 2 ? 20 : 0)
|
gsap.set(this.stageCanvas, { y: this.offsetTop }); //+ (window.deviceInfo.screenSize <= 2 ? 20 : 0)
|
||||||
else
|
else
|
||||||
gsap.set(this.stageCanvas, { y: 0 });
|
gsap.set(this.stageCanvas, { y: 0 });
|
||||||
|
|
||||||
|
|
||||||
// console.log(this.stageCanvas.scaleX,this.stageCanvas.scaleY,window.devicePixelRatio)
|
// console.log(this.stageCanvas.scaleX,this.stageCanvas.scaleY,window.devicePixelRatio)
|
||||||
// console.log(this.stageContainer.x,this.stageContainer.y,this.currentStageHeight,this.offsetTop)
|
// console.log(this.stageContainer.x,this.stageContainer.y,this.currentStageHeight,this.offsetTop)
|
||||||
|
|
||||||
|
|||||||
@@ -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: {
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -100,6 +108,7 @@
|
|||||||
// @ is an alias to /src
|
// @ is an alias to /src
|
||||||
import colorUtil from "color-util";
|
import colorUtil from "color-util";
|
||||||
import colors from "@/data/color.json";
|
import colors from "@/data/color.json";
|
||||||
|
import { export_json_to_excel } from "@/utils/plugins/Export2Excel";
|
||||||
import gsap from "gsap";
|
import gsap from "gsap";
|
||||||
export default {
|
export default {
|
||||||
name: "ColorSort",
|
name: "ColorSort",
|
||||||
@@ -111,87 +120,88 @@ 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: "",
|
||||||
@@ -236,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
|
||||||
@@ -282,11 +310,11 @@ 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);
|
||||||
@@ -303,43 +331,56 @@ export default {
|
|||||||
});
|
});
|
||||||
|
|
||||||
let height = 100; //boxHeight
|
let height = 100; //boxHeight
|
||||||
if (word.length > 180) {
|
// if (word.length > 180) {
|
||||||
height = 180;
|
// height = 180;
|
||||||
}
|
// }
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (this.hideOrigin) {
|
if (this.hideOrigin) {
|
||||||
// 分组
|
// 分组
|
||||||
this.newColorArr.forEach((item, index) => {
|
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 =
|
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) => {
|
||||||
@@ -348,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);
|
||||||
|
|
||||||
@@ -594,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;
|
||||||
|
|||||||
179
src/utils/plugins/Blob.js
Normal file
179
src/utils/plugins/Blob.js
Normal file
@@ -0,0 +1,179 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
/* Blob.js
|
||||||
|
* A Blob implementation.
|
||||||
|
* 2014-05-27
|
||||||
|
*
|
||||||
|
* By Eli Grey, http://eligrey.com
|
||||||
|
* By Devin Samarin, https://github.com/eboyjr
|
||||||
|
* License: X11/MIT
|
||||||
|
* See LICENSE.md
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*global self, unescape */
|
||||||
|
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
|
||||||
|
plusplus: true */
|
||||||
|
|
||||||
|
/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
|
||||||
|
|
||||||
|
(function (view) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
view.URL = view.URL || view.webkitURL;
|
||||||
|
|
||||||
|
if (view.Blob && view.URL) {
|
||||||
|
try {
|
||||||
|
new Blob;
|
||||||
|
return;
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Internally we use a BlobBuilder implementation to base Blob off of
|
||||||
|
// in order to support older browsers that only have BlobBuilder
|
||||||
|
var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
|
||||||
|
var
|
||||||
|
get_class = function(object) {
|
||||||
|
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
|
||||||
|
}
|
||||||
|
, FakeBlobBuilder = function BlobBuilder() {
|
||||||
|
this.data = [];
|
||||||
|
}
|
||||||
|
, FakeBlob = function Blob(data, type, encoding) {
|
||||||
|
this.data = data;
|
||||||
|
this.size = data.length;
|
||||||
|
this.type = type;
|
||||||
|
this.encoding = encoding;
|
||||||
|
}
|
||||||
|
, FBB_proto = FakeBlobBuilder.prototype
|
||||||
|
, FB_proto = FakeBlob.prototype
|
||||||
|
, FileReaderSync = view.FileReaderSync
|
||||||
|
, FileException = function(type) {
|
||||||
|
this.code = this[this.name = type];
|
||||||
|
}
|
||||||
|
, file_ex_codes = (
|
||||||
|
"NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
|
||||||
|
+ "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
|
||||||
|
).split(" ")
|
||||||
|
, file_ex_code = file_ex_codes.length
|
||||||
|
, real_URL = view.URL || view.webkitURL || view
|
||||||
|
, real_create_object_URL = real_URL.createObjectURL
|
||||||
|
, real_revoke_object_URL = real_URL.revokeObjectURL
|
||||||
|
, URL = real_URL
|
||||||
|
, btoa = view.btoa
|
||||||
|
, atob = view.atob
|
||||||
|
|
||||||
|
, ArrayBuffer = view.ArrayBuffer
|
||||||
|
, Uint8Array = view.Uint8Array
|
||||||
|
;
|
||||||
|
FakeBlob.fake = FB_proto.fake = true;
|
||||||
|
while (file_ex_code--) {
|
||||||
|
FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
|
||||||
|
}
|
||||||
|
if (!real_URL.createObjectURL) {
|
||||||
|
URL = view.URL = {};
|
||||||
|
}
|
||||||
|
URL.createObjectURL = function(blob) {
|
||||||
|
var
|
||||||
|
type = blob.type
|
||||||
|
, data_URI_header
|
||||||
|
;
|
||||||
|
if (type === null) {
|
||||||
|
type = "application/octet-stream";
|
||||||
|
}
|
||||||
|
if (blob instanceof FakeBlob) {
|
||||||
|
data_URI_header = "data:" + type;
|
||||||
|
if (blob.encoding === "base64") {
|
||||||
|
return data_URI_header + ";base64," + blob.data;
|
||||||
|
} else if (blob.encoding === "URI") {
|
||||||
|
return data_URI_header + "," + decodeURIComponent(blob.data);
|
||||||
|
} if (btoa) {
|
||||||
|
return data_URI_header + ";base64," + btoa(blob.data);
|
||||||
|
} else {
|
||||||
|
return data_URI_header + "," + encodeURIComponent(blob.data);
|
||||||
|
}
|
||||||
|
} else if (real_create_object_URL) {
|
||||||
|
return real_create_object_URL.call(real_URL, blob);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
URL.revokeObjectURL = function(object_URL) {
|
||||||
|
if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
|
||||||
|
real_revoke_object_URL.call(real_URL, object_URL);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
FBB_proto.append = function(data/*, endings*/) {
|
||||||
|
var bb = this.data;
|
||||||
|
// decode data to a binary string
|
||||||
|
if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
|
||||||
|
var
|
||||||
|
str = ""
|
||||||
|
, buf = new Uint8Array(data)
|
||||||
|
, i = 0
|
||||||
|
, buf_len = buf.length
|
||||||
|
;
|
||||||
|
for (; i < buf_len; i++) {
|
||||||
|
str += String.fromCharCode(buf[i]);
|
||||||
|
}
|
||||||
|
bb.push(str);
|
||||||
|
} else if (get_class(data) === "Blob" || get_class(data) === "File") {
|
||||||
|
if (FileReaderSync) {
|
||||||
|
var fr = new FileReaderSync;
|
||||||
|
bb.push(fr.readAsBinaryString(data));
|
||||||
|
} else {
|
||||||
|
// async FileReader won't work as BlobBuilder is sync
|
||||||
|
throw new FileException("NOT_READABLE_ERR");
|
||||||
|
}
|
||||||
|
} else if (data instanceof FakeBlob) {
|
||||||
|
if (data.encoding === "base64" && atob) {
|
||||||
|
bb.push(atob(data.data));
|
||||||
|
} else if (data.encoding === "URI") {
|
||||||
|
bb.push(decodeURIComponent(data.data));
|
||||||
|
} else if (data.encoding === "raw") {
|
||||||
|
bb.push(data.data);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (typeof data !== "string") {
|
||||||
|
data += ""; // convert unsupported types to strings
|
||||||
|
}
|
||||||
|
// decode UTF-16 to binary string
|
||||||
|
bb.push(unescape(encodeURIComponent(data)));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
FBB_proto.getBlob = function(type) {
|
||||||
|
if (!arguments.length) {
|
||||||
|
type = null;
|
||||||
|
}
|
||||||
|
return new FakeBlob(this.data.join(""), type, "raw");
|
||||||
|
};
|
||||||
|
FBB_proto.toString = function() {
|
||||||
|
return "[object BlobBuilder]";
|
||||||
|
};
|
||||||
|
FB_proto.slice = function(start, end, type) {
|
||||||
|
var args = arguments.length;
|
||||||
|
if (args < 3) {
|
||||||
|
type = null;
|
||||||
|
}
|
||||||
|
return new FakeBlob(
|
||||||
|
this.data.slice(start, args > 1 ? end : this.data.length)
|
||||||
|
, type
|
||||||
|
, this.encoding
|
||||||
|
);
|
||||||
|
};
|
||||||
|
FB_proto.toString = function() {
|
||||||
|
return "[object Blob]";
|
||||||
|
};
|
||||||
|
FB_proto.close = function() {
|
||||||
|
this.size = this.data.length = 0;
|
||||||
|
};
|
||||||
|
return FakeBlobBuilder;
|
||||||
|
}(view));
|
||||||
|
|
||||||
|
view.Blob = function Blob(blobParts, options) {
|
||||||
|
var type = options ? (options.type || "") : "";
|
||||||
|
var builder = new BlobBuilder();
|
||||||
|
if (blobParts) {
|
||||||
|
for (var i = 0, len = blobParts.length; i < len; i++) {
|
||||||
|
builder.append(blobParts[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return builder.getBlob(type);
|
||||||
|
};
|
||||||
|
}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
|
||||||
143
src/utils/plugins/Export2Excel.js
Normal file
143
src/utils/plugins/Export2Excel.js
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
require('script-loader!file-saver');
|
||||||
|
require('./Blob.js'); //改成相对路径
|
||||||
|
require('script-loader!xlsx/dist/xlsx.core.min');
|
||||||
|
function generateArray(table) {
|
||||||
|
var out = [];
|
||||||
|
var rows = table.querySelectorAll('tr');
|
||||||
|
var ranges = [];
|
||||||
|
for (var R = 0; R < rows.length; ++R) {
|
||||||
|
var outRow = [];
|
||||||
|
var row = rows[R];
|
||||||
|
var columns = row.querySelectorAll('td');
|
||||||
|
for (var C = 0; C < columns.length; ++C) {
|
||||||
|
var cell = columns[C];
|
||||||
|
var colspan = cell.getAttribute('colspan');
|
||||||
|
var rowspan = cell.getAttribute('rowspan');
|
||||||
|
var cellValue = cell.innerText;
|
||||||
|
if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
|
||||||
|
|
||||||
|
//Skip ranges
|
||||||
|
ranges.forEach(function (range) {
|
||||||
|
if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
|
||||||
|
for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//Handle Row Span
|
||||||
|
if (rowspan || colspan) {
|
||||||
|
rowspan = rowspan || 1;
|
||||||
|
colspan = colspan || 1;
|
||||||
|
ranges.push({s: {r: R, c: outRow.length}, e: {r: R + rowspan - 1, c: outRow.length + colspan - 1}});
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
//Handle Value
|
||||||
|
outRow.push(cellValue !== "" ? cellValue : null);
|
||||||
|
|
||||||
|
//Handle Colspan
|
||||||
|
if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
|
||||||
|
}
|
||||||
|
out.push(outRow);
|
||||||
|
}
|
||||||
|
return [out, ranges];
|
||||||
|
};
|
||||||
|
|
||||||
|
function datenum(v, date1904) {
|
||||||
|
if (date1904) v += 1462;
|
||||||
|
var epoch = Date.parse(v);
|
||||||
|
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function sheet_from_array_of_arrays(data, opts) {
|
||||||
|
var ws = {};
|
||||||
|
var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};
|
||||||
|
for (var R = 0; R != data.length; ++R) {
|
||||||
|
for (var C = 0; C != data[R].length; ++C) {
|
||||||
|
if (range.s.r > R) range.s.r = R;
|
||||||
|
if (range.s.c > C) range.s.c = C;
|
||||||
|
if (range.e.r < R) range.e.r = R;
|
||||||
|
if (range.e.c < C) range.e.c = C;
|
||||||
|
var cell = {v: data[R][C]};
|
||||||
|
if (cell.v == null) continue;
|
||||||
|
var cell_ref = XLSX.utils.encode_cell({c: C, r: R});
|
||||||
|
|
||||||
|
if (typeof cell.v === 'number') cell.t = 'n';
|
||||||
|
else if (typeof cell.v === 'boolean') cell.t = 'b';
|
||||||
|
else if (cell.v instanceof Date) {
|
||||||
|
cell.t = 'n';
|
||||||
|
cell.z = XLSX.SSF._table[14];
|
||||||
|
cell.v = datenum(cell.v);
|
||||||
|
}
|
||||||
|
else cell.t = 's';
|
||||||
|
|
||||||
|
ws[cell_ref] = cell;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
|
||||||
|
return ws;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Workbook() {
|
||||||
|
if (!(this instanceof Workbook)) return new Workbook();
|
||||||
|
this.SheetNames = [];
|
||||||
|
this.Sheets = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
function s2ab(s) {
|
||||||
|
var buf = new ArrayBuffer(s.length);
|
||||||
|
var view = new Uint8Array(buf);
|
||||||
|
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
|
||||||
|
return buf;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function export_table_to_excel(id) {
|
||||||
|
var theTable = document.getElementById(id);
|
||||||
|
console.log('a')
|
||||||
|
var oo = generateArray(theTable);
|
||||||
|
var ranges = oo[1];
|
||||||
|
|
||||||
|
/* original data */
|
||||||
|
var data = oo[0];
|
||||||
|
var ws_name = "SheetJS";
|
||||||
|
console.log(data);
|
||||||
|
|
||||||
|
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
|
||||||
|
|
||||||
|
/* add ranges to worksheet */
|
||||||
|
// ws['!cols'] = ['apple', 'banan'];
|
||||||
|
ws['!merges'] = ranges;
|
||||||
|
|
||||||
|
/* add worksheet to workbook */
|
||||||
|
wb.SheetNames.push(ws_name);
|
||||||
|
wb.Sheets[ws_name] = ws;
|
||||||
|
|
||||||
|
var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
|
||||||
|
|
||||||
|
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatJson(jsonData) {
|
||||||
|
console.log(jsonData)
|
||||||
|
}
|
||||||
|
export function export_json_to_excel(th, jsonData, defaultTitle) {
|
||||||
|
|
||||||
|
/* original data */
|
||||||
|
|
||||||
|
var data = jsonData;
|
||||||
|
data.unshift(th);
|
||||||
|
var ws_name = "SheetJS";
|
||||||
|
|
||||||
|
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
|
||||||
|
|
||||||
|
// 设置每列的宽度
|
||||||
|
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;
|
||||||
|
|
||||||
|
var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
|
||||||
|
var title = defaultTitle || '列表'
|
||||||
|
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
|
||||||
|
}
|
||||||
|
|
||||||
@@ -15,36 +15,31 @@ FPS.startFPS = function (stage,pos = {x : 0, y : 0}, app){
|
|||||||
if (FPS.app.debug) {
|
if (FPS.app.debug) {
|
||||||
stage.addChild(FPS.container);
|
stage.addChild(FPS.container);
|
||||||
}
|
}
|
||||||
FPS.container.addChild(FPS.shape)
|
// FPS.container.addChild(FPS.shape)
|
||||||
FPS.container.addChild(FPS.txt);
|
// FPS.container.addChild(FPS.txt);
|
||||||
FPS.container.cache(pos.x, pos.y, 140, 50);
|
FPS.container.cache(pos.x, pos.y, 140, 50);
|
||||||
createjs.Ticker.addEventListener("tick", FPS.TickerFPS);
|
createjs.Ticker.addEventListener("tick", FPS.TickerFPS);
|
||||||
|
|
||||||
// setInterval(FPS.TickerFPS,18)
|
// setInterval(FPS.TickerFPS,18)
|
||||||
}
|
}
|
||||||
FPS.TickerFPS = function (event)
|
FPS.TickerFPS = function (event) {
|
||||||
{
|
|
||||||
FPS.date = new Date();
|
FPS.date = new Date();
|
||||||
FPS.currentTime = FPS.date.getTime();
|
FPS.currentTime = FPS.date.getTime();
|
||||||
if(FPS.time!=0)
|
if (FPS.time != 0) {
|
||||||
{
|
|
||||||
FPS.FPS = Math.ceil(1000 / (FPS.currentTime - FPS.time));
|
FPS.FPS = Math.ceil(1000 / (FPS.currentTime - FPS.time));
|
||||||
}
|
}
|
||||||
FPS.time = FPS.currentTime;
|
FPS.time = FPS.currentTime;
|
||||||
FPS.txt.text = "FPS: " + FPS.FPS + "\n" + FPS.showText;
|
FPS.txt.text = "FPS: " + FPS.FPS + "\n" + FPS.showText;
|
||||||
FPS.container.cache(FPS.pos.x, FPS.pos.y, 140, 50);
|
FPS.container.cache(FPS.pos.x, FPS.pos.y, 140, 50);
|
||||||
}
|
}
|
||||||
FPS.startFPS2 = function (stage)
|
FPS.startFPS2 = function (stage) {
|
||||||
{
|
|
||||||
FPS.txt = document.getElementById("fps");
|
FPS.txt = document.getElementById("fps");
|
||||||
createjs.Ticker.addEventListener("tick", FPS.TickerFPS2);
|
createjs.Ticker.addEventListener("tick", FPS.TickerFPS2);
|
||||||
}
|
}
|
||||||
FPS.TickerFPS2 = function (event)
|
FPS.TickerFPS2 = function (event) {
|
||||||
{
|
|
||||||
FPS.date = new Date();
|
FPS.date = new Date();
|
||||||
FPS.currentTime = FPS.date.getTime();
|
FPS.currentTime = FPS.date.getTime();
|
||||||
if(FPS.time!=0)
|
if (FPS.time != 0) {
|
||||||
{
|
|
||||||
FPS.FPS = Math.ceil(1000 / (FPS.currentTime - FPS.time));
|
FPS.FPS = Math.ceil(1000 / (FPS.currentTime - FPS.time));
|
||||||
}
|
}
|
||||||
FPS.time = FPS.currentTime;
|
FPS.time = FPS.currentTime;
|
||||||
|
|||||||
Reference in New Issue
Block a user