yutent
/
gaoji
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

趋势表更新为canvas

master
宇天 2020-07-27 14:07:38 +08:00
parent ab42086f1f
commit 3caad617de
7 changed files with 67 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "io.yutent.gaystat",
"version": "1.1.2",
"version": "1.2.0",
"description": "搞基数据",
"main": "src/main.js",
"scripts": {

2
src/css/app.css
View File

@ -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}

10
src/css/app.scss
View File

@ -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 {

3
src/css/var.scss
View File

@ -14,5 +14,4 @@ $cd: #62778d #526273 #425064;
@function px($n: 1) {
@return ($n / 12.8) + rem;
}
}

9
src/index.html
View File

@ -21,12 +21,9 @@
<h3 class="do-fn-ell" :text="it.name"></h3>
<cite :text="it.code"></cite>
</div>
<ul class="last-week">
<li
:for="d in it.last"
:css="{height: d.h}">
</li>
</ul>
<canvas class="last-week" width="70" height="30" :draw="it.last"></canvas>
<div class="today" @dblclick="updateGay(it)">
<span class="money" :text="it.curr"></span>
<span

31
src/js/app.js
View File

@ -9,6 +9,7 @@
import '/lib/anot.js'
import '/lib/form/button.js'
import '/lib/scroll/index.js'
import '/lib/canvas-draw.js'
import layer from '/lib/layer/index.js'
import Utils from '/lib/utils.js'
@ -32,16 +33,19 @@ function getTableData(str) {
var max = 0
table.innerHTML = match[0]
list = Array.from(table.children[0].children).map(it => {
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) {

40
src/lib/canvas-draw.js Normal file
View File

@ -0,0 +1,40 @@
/**
* canvas渲染
* @author yutent<yutent.io@gmail.com>
* @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()
}
})