生成excel开发中 进度 10%

package.json

@@ -20,6 +20,7 @@
     "eslint-config-standard": "^14.1.1",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
+    "file-saver": "^2.0.5",
     "global": "^4.4.0",
     "good-storage": "^1.1.1",
     "gsap": "^3.5.1",
@@ -30,6 +31,7 @@
     "postcss-px2rem-exclude": "^0.0.6",
     "postcss-viewport-units": "^0.1.6",
     "px2rem-loader": "^0.1.9",
+    "script-loader": "^0.7.2",
     "style-resources-loader": "^1.3.3",
     "swiper": "^6.2.0",
     "tinyimg-webpack-plugin": "^0.0.5",
@@ -41,7 +43,8 @@
     "vue-slider-component": "^3.2.11",
     "vuex": "^3.4.0",
     "webpack-glsl-loader": "^1.0.1",
-    "wx-jssdk": "^0.0.7"
+    "wx-jssdk": "^0.0.7",
+    "xlsx": "^0.18.4"
   },
   "devDependencies": {
     "@babel/core": "^7.13.14",

src/page/index/Home/index.vue

@@ -40,6 +40,151 @@
             </div>
         </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>
 </template>
 <script>
@@ -241,6 +386,13 @@ export default {
         // 	6px -18px 40px #f5c5cb inset, 11px -18px 40px #f0c1ef 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 {
         padding: 30px 0 180px 0px !important;
         h1,
@@ -248,7 +400,10 @@ export default {
             position: relative;
             z-index: 10;
             text-align: center;
+            color: #fff;
             margin-top: 10px;
+            font-weight: 700;
+            mix-blend-mode: overlay;
         }
     }
     .dialog {

src/page/index/PushCoinGame/game/index.js

@@ -4,6 +4,7 @@ import { gsap } from "gsap";
 import Resource from "./preload";
 import utils from '@/utils/index.js';
 import Matter from 'matter-js';
+import decomp from 'poly-decomp';
 
 
 class game {
@@ -50,6 +51,7 @@ class game {
             this.Runner = Matter.Runner,
             this.Bodies = Matter.Bodies,
             this.Composite = Matter.Composite;
+        Matter.Common.setDecomp(decomp)
     }
 
     // 初始化
@@ -190,7 +192,7 @@ class game {
         console.log(this.globalSpeed)
     }
 
-    // 
+    // 初始化物理引擎
     initMatterEngine() {
         // create an engine 
         this.myEngine = this.Engine.create();
@@ -198,14 +200,15 @@ class game {
         this.myWorld = this.myEngine.world;
 
 
+
         // create a renderer
         this.myRender = this.Render.create({
             // element: this.vue.$refs.container,
             engine: this.myEngine,
             canvas: this.vue.$refs.matter,
             options: {
-                width: 375, //window.innerWidth,
+                width: 375,// 375, //window.innerWidth,
-                height: 812,  //window.innerHeight,
+                height: 812, //812,  //window.innerHeight,
                 pixelRatio: 1, // 设置像素比 window.devicePixelRatio
                 background: 'transparent',
                 wireframeBackground: "transparent",

src/page/index/PushCoinGame/game/stage.js

@@ -79,10 +79,18 @@ class creater {
     //屏幕自适应 
     adaptScreen() {
         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.currentStageHeight = 1624 / 750 * window.innerWidth;
             this.currentWidthHeightScale = this.currentStageWidth / this.currentStageHeight;
-
+            this.offsetTop = (window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY;
+        }
         if (this.currentStageWidth > this.currentStageHeight) {
             if (this.initWidthHeightScale < this.currentWidthHeightScale)
                 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.y = 0//(window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY / 2;
 
-        this.offsetTop = (window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY;
 
         if (window.innerHeight < this.currentStageHeight)
             gsap.set(this.stageCanvas, { y: this.offsetTop });  //+ (window.deviceInfo.screenSize <= 2 ? 20 : 0)
         else
             gsap.set(this.stageCanvas, { y: 0 });
 
+
         // console.log(this.stageCanvas.scaleX,this.stageCanvas.scaleY,window.devicePixelRatio)
         // console.log(this.stageContainer.x,this.stageContainer.y,this.currentStageHeight,this.offsetTop)
 

src/page/index/colorSort/index.vue

@@ -100,6 +100,7 @@
 // @ is an alias to /src
 import colorUtil from "color-util";
 import colors from "@/data/color.json";
+import { export_json_to_excel } from "@/utils/plugins/Export2Excel";
 import gsap from "gsap";
 export default {
     name: "ColorSort",
@@ -303,9 +304,9 @@ export default {
             });
 
             let height = 100; //boxHeight
-			if (word.length > 180) {
+            // if (word.length > 180) {
-				height = 180;
+            // 	height = 180;
-			}
+            // }
 
             setTimeout(() => {
                 if (this.hideOrigin) {

src/utils/plugins/Blob.js

@@ -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));

src/utils/plugins/Export2Excel.js

@@ -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:100},{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")
+}
+

src/utils/plugins/stats-2d.js

@@ -15,36 +15,31 @@ FPS.startFPS = function (stage,pos = {x : 0, y : 0}, app){
     if (FPS.app.debug) {
         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);
     createjs.Ticker.addEventListener("tick", FPS.TickerFPS);
 
     //    setInterval(FPS.TickerFPS,18)
 }
-FPS.TickerFPS = function (event)
+FPS.TickerFPS = function (event) {
-{
     FPS.date = new Date();
     FPS.currentTime = FPS.date.getTime();
-    if(FPS.time!=0)
+    if (FPS.time != 0) {
-    {
         FPS.FPS = Math.ceil(1000 / (FPS.currentTime - FPS.time));
     }
     FPS.time = FPS.currentTime;
     FPS.txt.text = "FPS: " + FPS.FPS + "\n" + FPS.showText;
     FPS.container.cache(FPS.pos.x, FPS.pos.y, 140, 50);
 }
-FPS.startFPS2 = function (stage)
+FPS.startFPS2 = function (stage) {
-{
     FPS.txt = document.getElementById("fps");
     createjs.Ticker.addEventListener("tick", FPS.TickerFPS2);
 }
-FPS.TickerFPS2 = function (event)
+FPS.TickerFPS2 = function (event) {
-{
     FPS.date = new Date();
     FPS.currentTime = FPS.date.getTime();
-    if(FPS.time!=0)
+    if (FPS.time != 0) {
-    {
         FPS.FPS = Math.ceil(1000 / (FPS.currentTime - FPS.time));
     }
     FPS.time = FPS.currentTime;