backup: snapshot before optimization
This commit is contained in:
@@ -0,0 +1,85 @@
|
||||
var util = require('../../utils/util')
|
||||
|
||||
Component({
|
||||
properties: {
|
||||
year: { type: Number, value: new Date().getFullYear() },
|
||||
month: { type: Number, value: new Date().getMonth() + 1 },
|
||||
records: { type: Array, value: [] }
|
||||
},
|
||||
|
||||
data: {
|
||||
weeks: []
|
||||
},
|
||||
|
||||
observers: {
|
||||
'year, month, records': function (year, month, records) {
|
||||
this._compute(year, month, records)
|
||||
}
|
||||
},
|
||||
|
||||
lifetimes: {
|
||||
ready: function () {
|
||||
this._compute(this.properties.year, this.properties.month, this.properties.records)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
_compute: function (year, month, records) {
|
||||
var weeks = util.getMonthCalendar(year, month)
|
||||
var recordMap = {}
|
||||
if (records && records.length) {
|
||||
records.forEach(function (r) {
|
||||
var d = parseInt(r.date.split('-')[2])
|
||||
recordMap[d] = (recordMap[d] || 0) + r.duration
|
||||
})
|
||||
}
|
||||
|
||||
var data = weeks.map(function (week) {
|
||||
return week.map(function (day) {
|
||||
if (!day) return null
|
||||
var duration = recordMap[day] || 0
|
||||
var color = 'transparent'
|
||||
if (duration > 0) {
|
||||
if (duration < 30) color = '#FFE0D0'
|
||||
else if (duration < 60) color = '#FFB088'
|
||||
else if (duration < 120) color = '#FF6B35'
|
||||
else color = '#E05520'
|
||||
}
|
||||
return { day: day, duration: duration, color: color }
|
||||
})
|
||||
})
|
||||
|
||||
this.setData({ weeks: data })
|
||||
},
|
||||
|
||||
onDayTap: function (e) {
|
||||
var day = e.currentTarget.dataset.day
|
||||
if (!day) return
|
||||
var cell = null
|
||||
var weeks = this.data.weeks
|
||||
for (var i = 0; i < weeks.length; i++) {
|
||||
for (var j = 0; j < weeks[i].length; j++) {
|
||||
var c = weeks[i][j]
|
||||
if (c && c.day === day) { cell = c; break }
|
||||
}
|
||||
if (cell) break
|
||||
}
|
||||
if (!cell || cell.duration <= 0) return
|
||||
this.triggerEvent('daytap', {
|
||||
year: this.properties.year,
|
||||
month: this.properties.month,
|
||||
day: day,
|
||||
duration: cell.duration
|
||||
})
|
||||
},
|
||||
|
||||
getHeatColor: function (cell) {
|
||||
if (!cell || cell.duration <= 0) return 'transparent'
|
||||
var d = cell.duration
|
||||
if (d < 30) return '#FFE0D0'
|
||||
if (d < 60) return '#FFB088'
|
||||
if (d < 120) return '#FF6B35'
|
||||
return '#E05520'
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<view class="heatmap-container">
|
||||
<view class="calendar-header">
|
||||
<text class="month-label">{{year}}年{{month}}月</text>
|
||||
<view class="weekday-labels">
|
||||
<text class="weekday" wx:for="{{['日','一','二','三','四','五','六']}}" wx:key="*this">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="calendar-grid">
|
||||
<view class="calendar-week" wx:for="{{weeks}}" wx:key="index">
|
||||
<view
|
||||
class="calendar-day {{cell && cell.duration > 0 ? 'has-data' : 'empty'}}"
|
||||
wx:for="{{item}}"
|
||||
wx:for-item="cell"
|
||||
wx:key="index"
|
||||
style="background-color: {{cell ? cell.color : 'transparent'}};"
|
||||
data-day="{{cell ? cell.day : ''}}"
|
||||
bindtap="onDayTap"
|
||||
>
|
||||
<text class="day-num" wx:if="{{cell}}">{{cell.day}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="heat-legend">
|
||||
<text class="legend-label">少</text>
|
||||
<view class="legend-block" style="background:#FFE0D0;"></view>
|
||||
<view class="legend-block" style="background:#FFB088;"></view>
|
||||
<view class="legend-block" style="background:#FF6B35;"></view>
|
||||
<view class="legend-block" style="background:#E05520;"></view>
|
||||
<text class="legend-label">多</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,77 @@
|
||||
.heatmap-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.month-label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.weekday-labels {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.weekday {
|
||||
width: 56rpx;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.calendar-week {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendar-day.empty {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.day-num {
|
||||
font-size: 22rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.heat-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 16rpx;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.legend-label {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.legend-block {
|
||||
width: 32rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
var util = require('../../utils/util')
|
||||
|
||||
Component({
|
||||
properties: {
|
||||
duration: { type: Number, value: 60 },
|
||||
remaining: { type: Number, value: 60 },
|
||||
size: { type: Number, value: 280 },
|
||||
ringWidth: { type: Number, value: 14 },
|
||||
status: { type: String, value: 'idle' },
|
||||
primaryColor: { type: String, value: '#FF6B35' },
|
||||
primaryLightColor: { type: String, value: '#FF8C5A' }
|
||||
},
|
||||
|
||||
data: {
|
||||
displayTime: '00:00',
|
||||
statusText: '准备开始'
|
||||
},
|
||||
|
||||
observers: {
|
||||
'remaining, status, duration, size, ringWidth, primaryColor': function () {
|
||||
var texts = { idle: '准备开始', running: '坚持住', paused: '已暂停', completed: '完成!' }
|
||||
this.setData({
|
||||
displayTime: util.formatTime(this.data.remaining),
|
||||
statusText: texts[this.data.status] || ''
|
||||
})
|
||||
this._draw()
|
||||
}
|
||||
},
|
||||
|
||||
lifetimes: {
|
||||
ready: function () {
|
||||
var self = this
|
||||
var query = this.createSelectorQuery()
|
||||
query.select('#ringCanvas')
|
||||
.fields({ node: true, size: true })
|
||||
.exec(function (res) {
|
||||
if (!res || !res[0] || !res[0].node) return
|
||||
var canvas = res[0].node
|
||||
var dpr = wx.getSystemInfoSync().pixelRatio || 2
|
||||
var displaySize = self.data.size
|
||||
canvas.width = displaySize * dpr
|
||||
canvas.height = displaySize * dpr
|
||||
self._ctx = canvas.getContext('2d')
|
||||
self._dpr = dpr
|
||||
self._draw()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
_draw: function () {
|
||||
var ctx = this._ctx
|
||||
if (!ctx) return
|
||||
|
||||
var size = this.data.size
|
||||
var dpr = this._dpr
|
||||
var ringWidth = this.data.ringWidth
|
||||
var duration = this.data.duration
|
||||
var remaining = this.data.remaining
|
||||
var primaryColor = this.data.primaryColor
|
||||
|
||||
var w = size * dpr
|
||||
var h = size * dpr
|
||||
ctx.clearRect(0, 0, w, h)
|
||||
|
||||
var cx = w / 2
|
||||
var cy = h / 2
|
||||
var radius = (size - ringWidth) / 2 * dpr
|
||||
var lw = ringWidth * dpr
|
||||
|
||||
// track ring
|
||||
ctx.beginPath()
|
||||
ctx.arc(cx, cy, radius, 0, Math.PI * 2)
|
||||
ctx.strokeStyle = '#EEEEEE'
|
||||
ctx.lineWidth = lw
|
||||
ctx.lineCap = 'round'
|
||||
ctx.stroke()
|
||||
|
||||
// progress arc (clockwise from 12 o'clock, represents remaining time)
|
||||
var ratio = duration > 0 ? Math.max(0, Math.min(1, remaining / duration)) : 0
|
||||
if (ratio > 0.001) {
|
||||
var startAngle = -Math.PI / 2
|
||||
var endAngle = startAngle + ratio * Math.PI * 2
|
||||
ctx.beginPath()
|
||||
ctx.arc(cx, cy, radius, startAngle, endAngle)
|
||||
ctx.strokeStyle = primaryColor
|
||||
ctx.lineWidth = lw
|
||||
ctx.lineCap = 'round'
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<view class="ring-wrap" style="width: {{size}}rpx; height: {{size}}rpx;">
|
||||
<canvas type="2d" id="ringCanvas" class="ring-canvas" style="width: {{size}}rpx; height: {{size}}rpx;"></canvas>
|
||||
<view class="ring-center">
|
||||
<text class="time-text">{{displayTime}}</text>
|
||||
<text class="status-text">{{statusText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,37 @@
|
||||
.ring-wrap {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ring-canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ring-center {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 80rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 2rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 10rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
Reference in New Issue
Block a user