From 3caad617dea27bdcd7da8185f55dbd84e5cfa75e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Mon, 27 Jul 2020 14:07:38 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B6=8B=E5=8A=BF=E8=A1=A8=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E4=B8=BAcanvas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/css/app.css | 2 +- src/css/app.scss | 10 +++------- src/css/var.scss | 3 +-- src/index.html | 9 +++------ src/js/app.js | 31 ++++++++++++++++++------------- src/lib/canvas-draw.js | 40 ++++++++++++++++++++++++++++++++++++++++ 7 files changed, 67 insertions(+), 30 deletions(-) create mode 100644 src/lib/canvas-draw.js diff --git a/package.json b/package.json index afca889..2b5e0db 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "io.yutent.gaystat", - "version": "1.1.2", + "version": "1.2.0", "description": "搞基数据", "main": "src/main.js", "scripts": { diff --git a/src/css/app.css b/src/css/app.css index d0ea1af..51789b3 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -1 +1 @@ -html{font-size:12.8px;width:100%;height:100vh}body{display:flex;flex-direction:column;width:100%;height:100%;padding-top:.9375rem;line-height:1.25;font-size:1.09375rem;color:#f2f5fc;background:transparent}.app{position:relative;display:flex;flex-direction:column;height:100%;padding:1.25rem 0 .46875rem;border-radius:.46875rem;background:rgba(100,100,100,0.75)}.app::before{position:absolute;left:12.10938rem;top:-.54688rem;width:1.09375rem;height:1.09375rem;border-radius:.15625rem;background:linear-gradient(to bottom right, rgba(100,100,100,0.7) 50%, transparent 50%);-webkit-transform:rotate(45deg);transform:rotate(45deg);content:""}.app .option,.app .close{position:absolute;right:.46875rem;top:.15625rem;--size: 1.09375rem;cursor:pointer;opacity:0}.app .option:hover,.app .close:hover{opacity:1}.app .close{right:auto;left:.46875rem}.app .list{flex:1}.app .list .item{display:flex;align-items:center;height:4.21875rem;padding:.78125rem .9375rem;line-height:1.17188rem;border-bottom:.07812rem solid rgba(200,200,200,0.1);border-top:.07812rem solid rgba(0,0,0,0.1)}.app .list .item:first-child{border-top:0}.app .list .item:last-child{border-bottom:0}.app .list .item .info{overflow:hidden;flex:1}.app .list .item .info h3{font-size:1.09375rem}.app .list .item .info cite{color:#dae1e9}.app .list .item .last-week{display:flex;justify-content:space-between;flex-flow:wrap-reverse;width:3.75rem;height:1.95312rem;margin:0 1.25rem}.app .list .item .last-week li{width:.23438rem;height:0;background:#fff}.app .list .item .today{width:4.0625rem;font-size:.9375rem;color:#fff;text-align:right}.app .list .item .today span{display:block;padding:0 .3125rem}.app .list .item .today .percent{border-radius:.15625rem}.app .list .item .today .percent.red{background:#ff5061}.app .list .item .today .percent.green{background:#4caf50} +html{font-size:12.8px;width:100%;height:100vh}body{display:flex;flex-direction:column;width:100%;height:100%;padding-top:.9375rem;line-height:1.25;font-size:1.09375rem;color:#f2f5fc;background:transparent}.app{position:relative;display:flex;flex-direction:column;height:100%;padding:1.25rem 0 .46875rem;border-radius:.46875rem;background:rgba(88,88,88,0.85)}.app::before{position:absolute;left:12.10938rem;top:-.54688rem;width:1.09375rem;height:1.09375rem;border-radius:.15625rem;background:linear-gradient(to bottom right, rgba(100,100,100,0.85) 50%, transparent 50%);-webkit-transform:rotate(45deg);transform:rotate(45deg);content:""}.app .option,.app .close{position:absolute;right:.46875rem;top:.15625rem;--size: 1.09375rem;cursor:pointer;opacity:0}.app .option:hover,.app .close:hover{opacity:1}.app .close{right:auto;left:.46875rem}.app .list{flex:1}.app .list .item{display:flex;align-items:center;height:4.21875rem;padding:.78125rem .9375rem;line-height:1.17188rem;border-bottom:.07812rem solid rgba(200,200,200,0.1);border-top:.07812rem solid rgba(0,0,0,0.1)}.app .list .item:first-child{border-top:0}.app .list .item:last-child{border-bottom:0}.app .list .item .info{overflow:hidden;flex:1}.app .list .item .info h3{font-size:1.09375rem}.app .list .item .info cite{color:#dae1e9}.app .list .item .last-week{display:flex;width:3.75rem;height:2.34375rem;margin:0 1.25rem}.app .list .item .today{width:4.0625rem;font-size:.9375rem;color:#fff;text-align:right}.app .list .item .today span{display:block;padding:0 .3125rem}.app .list .item .today .percent{border-radius:.15625rem}.app .list .item .today .percent.red{background:#ff5061}.app .list .item .today .percent.green{background:#4caf50} diff --git a/src/css/app.scss b/src/css/app.scss index e1e220f..eb9d0f7 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -28,14 +28,14 @@ body { height:100%; padding:px(16) 0 px(6); border-radius:px(6); - background:rgba(100, 100, 100, .75); + background:rgba(88, 88, 88, .85); &::before { position:absolute; left:px(155); top:px(-7); width:px(14); height:px(14); border-radius:px(2); - background: linear-gradient(to bottom right, rgba(100, 100, 100, .7) 50%, transparent 50%); + background: linear-gradient(to bottom right, rgba(100, 100, 100, .85) 50%, transparent 50%); transform:rotate(45deg); content:""; } @@ -78,12 +78,8 @@ body { .last-week { display:flex; - justify-content:space-between; - flex-flow: wrap-reverse; - width:px(48);height:px(25); + width:px(48);height:px(30); margin:0 px(16); - - li {width:px(3);height:0;background:#fff;} } .today { diff --git a/src/css/var.scss b/src/css/var.scss index 9ff2f2b..b16f42e 100644 --- a/src/css/var.scss +++ b/src/css/var.scss @@ -14,5 +14,4 @@ $cd: #62778d #526273 #425064; @function px($n: 1) { @return ($n / 12.8) + rem; -} - +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 4354f76..e3cd1ee 100644 --- a/src/index.html +++ b/src/index.html @@ -21,12 +21,9 @@

- + + +
{ - let m = +it.children[1].textContent - if (m > max) { - max = m - } - return { m } - }) + list = Array.from(table.children[0].children) + .map(it => { + let m = +it.children[1].textContent + if (m > max) { + max = m + } + return { m } + }) + .reverse() + max = Math.ceil(max) list.forEach(it => { - it.h = ((100 * it.m) / max).toFixed(2) + '%' + it.h = +((it.m * 30) / max).toFixed(2) }) return list } @@ -89,13 +93,14 @@ Anot({ return getJsonp(res) }, - getLastWeek(id) { + getLastMonth(id) { var res = ipcRenderer.sendSync( 'net', - `https://fund.eastmoney.com/f10/F10DataApi.aspx?type=lsjz&code=${id}` + `https://fund.eastmoney.com/f10/F10DataApi.aspx?type=lsjz&per=30&code=${id}` ) return getTableData(res) }, + addGay() { layer .prompt('请输入鸡精代号', (val, done) => { @@ -109,7 +114,7 @@ Anot({ } Anot.nextTick(_ => { var info = this.getTodayStat(id) - var last = this.getLastWeek(id) + var last = this.getLastMonth(id) if (info) { var tmp = { code: info.fundcode, @@ -131,13 +136,13 @@ Anot({ updateGay(item) { var info = this.getTodayStat(item.code) if (info.dwjz !== item.yesterday) { - item.last = this.getLastWeek(item.code) + item.yesterday = info.dwjz + item.last = this.getLastMonth(item.code) } item.curr = info.gsz item.percent = +info.gszzl Anot.ls('watch_list', this.list.$model) - // layer.toast('更新成功', 'success') }, removeGay(item) { diff --git a/src/lib/canvas-draw.js b/src/lib/canvas-draw.js new file mode 100644 index 0000000..b686c3d --- /dev/null +++ b/src/lib/canvas-draw.js @@ -0,0 +1,40 @@ +/** + * canvas渲染 + * @author yutent + * @date 2020/07/27 11:34:59 + */ + +'use strict' + +const log = console.log + +Anot.directive('draw', { + priority: 1500, + init(binding) { + var elem = binding.element + var ctx = elem.getContext('2d') + binding.$ctx = ctx + }, + update: function(val) { + var list = val.$model + var start = list.shift() + var x = 0 + + this.$ctx.clearRect(0, 0, 70, 30) + this.$ctx.fillStyle = '#a7a8ab' + this.$ctx.fillRect(0, 0, 1, 30) + this.$ctx.fillRect(0, 29, 70, 1) + + this.$ctx.beginPath() + this.$ctx.strokeStyle = '#ff5061' + this.$ctx.lineWidth = 1 + this.$ctx.moveTo(0, 30 - start.h) + + while (list.length) { + start = list.shift() + x += 2 + this.$ctx.lineTo(x, 30 - start.h) + } + this.$ctx.stroke() + } +})