源码

GitHub (opens new window)

目录

• 项目介绍
• 项目演示
• 目录结构
• 依赖项
• 数据结构

项目介绍

类型：移动端,单页应用
简介：基于vue2，elemnet-ui的时间统计工具，记录日常生活中某一时间段的活动记录，并按照年，月，周，日给出统计信息, 做这个应用的初衷是为了看看自己平常在各种乱七八糟的事情上都花了多少时间，以做出更好的安排和调整

项目演示

在线地址 (opens new window)

目录结构

timer
├─ .gitignore
├─ README.md
├─ babel.config.js
├─ output.js
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  └─ index.html
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  └─ a.jpg (背景图片)
│  ├─ components
│  │  ├─ Color.vue (选取不同类型的事件对应的名字和颜色)
│  │  ├─ Day.vue (显示一天的时间点和事件)
│  │  ├─ Daylist.vue (Day组件的列表)
│  │  ├─ Main.vue (主页)
│  │  ├─ Statistics.vue (数据统计组件)
│  │  ├─ Week.vue (显示一周的时间点和事件)
│  │  └─ Weeklist.vue (Week组件的列表)
│  ├─ main.js
│  ├─ router.js
│  ├─ store.js
│  └─ utils
│     ├─ calcLineChart.js (计算折线图)
│     ├─ chart.js (echart基本配置)
│     ├─ colorNameMap.js (生成颜色映射)
│     ├─ copyClip.js (剪切板)
│     ├─ duration.js (将天数按周进行分组)
│     ├─ getSum.js (获取一段时间内各类型事件的时间总长，用于统计)
│     └─ utils.js (一些工具函数)
└─ vue.config.js

依赖项

"@xunlei/vue-lazy-component": "^1.1.3",
"core-js": "^3.6.5",
"d": "^1.0.1",
"dayjs": "^1.10.7",
"echarts": "^5.2.2",
"element-ui": "^2.15.6",
"swiper": "^4.5.1",
"vue": "^2.6.11",
"vue-awesome-swiper": "^3.1.3",
"vue-router": "^3.5.3",
"vuex": "^3.6.2"

数据结构

将一天的数据，以日期为键值储存在localstorage中
结构如下
{
    texts:[
        {
            text: "读书"
            type: "b02bd5"
        },
        {
            text: "睡觉"
            type: "q1r345"
        }
        ...
    ],
    timePoint:["8:40","8:40"...]
}