# personal-system-web
**Repository Path**: sprouting/personal-system-web
## Basic Information
- **Project Name**: personal-system-web
- **Description**: 个人管理系统（Personal system）前端代码
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 26
- **Forks**: 9
- **Created**: 2022-07-12
- **Last Updated**: 2025-09-04
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 社交时间管理系统
## 简介
要说起这个项目，其实已经想了很久了，很早之前就做了第一版的社交管理系统v1.0，也使用了好些年了，但其中一些东西总是让我使用不够满意，然后今年就动手开始了第二版的编写。也就是现在的这个版本。
前端：https://gitee.com/sprouting/personal-system-web
后端：https://gitee.com/sprouting/personal-system-server
由来
为什么写这个系统，做第一版的时候其实就解决2个问题，一是记账，第二是生日提醒。
不知道大家有没这些痛点：
- 有些亲戚一年到头就见过一次，长啥样估计都不知道，然后过年回家还要称呼他
- 梳理整个家族的人际关系，只有东西出来后，你才知道，原来你们这个家族是这么庞大，一些亲戚原来是这个关系
- 待办事件提醒，比如身份证快到期了，某个人要生日了，还有按照周期性的提醒
- 家庭成员的账单，到底支出都到哪去了，哪一块的支出最大，各项资金的占比，收入比，累计支出，年度预算是否超标，当月账单，每个月用的最多的钱用在哪里
- 孩子的作业，周期性的作业，每隔几天要做一次的作业
- 家族的墓地，因为我们是南方农村地区，墓地零零散散的，每年清明扫墓要走好些个地方，估计小年轻都不知道要去哪些地方扫墓了，这也算是家族管理中的数据吧
- 卡证管理，哪些卡要过期了，密码是多少，要提前进行换卡提醒等等
- 年度目标、月度目标管理
- 自己看的一些书籍、游戏、影视作品等，我到底看了多少，然后看完之后的观感，这也算是自己的小需求，我喜欢将看过的书和电影等记录一下，并记录下当时的评价，现在回头看的时候，没想到看了这么多的东西
- 记录打卡，一直坚持某件事进行的打卡记录
- 密码管理、复杂密码生成，特别是对于程序员来说，密码真的太多了，我自己算了下，密码差不多100来个各种密码，然后还要设置不同的密码，没这东西真记不住，而且一般的密码软件真不够用，密码可能有多个，还有注册的手机、邮箱等等都要记录下来
- 生日提醒，以前老是忘记，但有了这个东西后基本不会忘记了，还可以设置多久提醒，另外，中国的生日很多都是阴历来计算的，市面上的生日软件很多考虑不足
- 孩子成长记录、照片。
- 月经记录器
- 一些小工具，比如有时候想用手机看下电脑上的小电影，主流的做法都是开启共享，或者要安装2个软件，而我的电脑开启共享也有问题，安装软件也不想安装，最麻烦的是，我开启了共享，如果忘记关闭了，在公司被人远程查看了，就非常社死了。所以也集成了这类小工具
### 后面可能会实现的
还有一些比较有意思的想法，想在后面加入进来，现阶段可能不会去做
- 声音保存，将一些人的声音保存下来，比如我过世的外婆，还想再听下她的声音。（暂时不会集成进来，个人拥有的照片里面有很多的视频，暂时可以满足需要）
- 导入指定文件下的书籍和音乐、视频，视频和音乐有一点问题，无法获取到太多有效数据，做出来的意义不大，书籍的获取同样，没有点评的书籍录入是没有任何价值的
- 家庭教育（现阶段都可以实现，暂时没有动力进行）
- 孩子的课程表
- 每天要做的作业提醒
- 音标
- 百词斩单词
- 字帖
- 下发作业给孩子
- 要解决的坏毛病，制定计划，怎么改，解决的步骤，解决的进度，解决的方案
- 建立奖惩激励记录，加减分
- 本学期的目标和月度目标、年度目标
- 加分减分表，这个还没想好，初步设想，洗碗加1分，搞卫生加1分，丢东西根据价值减分，达到多少分可以进行兑换
- 时间表
- 每天要做的作业，周期性作业
- 同学，朋友，
- 计划的任务
- 充值管理和提醒
- 投资持仓,持仓时间，买入时间，初始资金和收益等
- 借贷提醒
## 技术栈
| 技术或工具 | 版本 | 备注 |
| ----------------------- | ------ | ------------------------------------------------------------ |
| elementUI | 2.15.8 | |
| vue | | |
| amap-jsapi-loader | | 高德地图加载器，npm i @amap/amap-jsapi-loader -S
https://lbs.amap.com/api/uri-api/guide/mobile-web/point API 高德开发平台 https://lbs.amap.com/
https://lbs.amap.com/api/uri-api/guide/mobile-web/point 标记某个点
https://lbs.amap.com/api/uri-api/gettingstarted 入门 查看地理位置
https://elemefe.github.io/vue-amap/#/ 文档
https://lbs.amap.com/demo/jsapi-v2/example/geocoder/geocoding |
| 和风天气-天气组件 | | https://blog.csdn.net/qq_57386322/article/details/127935459 |
| xgplayer-hls | | 西瓜视频，播放m3u8 |
| xgplayer-flv | | 西瓜视频，播放http-flv |
| xgplayer | | 西瓜视频 |
| crypto-js | | 加解密 |
| axios | | http请求 |
| relationship | | https://gitee.com/passer-by/relationship 亲戚称呼计算器 |
| vue-seamless-scroll | | 循环滚动插件 |
| relation-graph | | 关系图谱组件 https://gitee.com/sync-github/relation-graph |
| zm-tree-org（暂未加入） | | 组织机构树 https://sangtian152.github.io/zm-tree-org/#/demo
数据结构（https://blog.csdn.net/weixin_43400431/article/details/125798138） |
| mavon-editor | | 支持Markdown的工具 https://www.npmjs.com/package/mavon-editor |
| echarts | | 图表 npm install echarts --save |
| vue-waterfall-easy | | 瀑布流图片 https://github.com/lfyfly/vue-waterfall-easy/blob/master/README-CN.md |
| vue-countup | | 数字滚动增长 |
| 大屏样式 | | 参考项目：https://gitee.com/xiongze/viewdata （有非常多的大屏样式，值得研究） |
## 界面
支持局域网手机看电影
update 2023年9月24日16:07:01 新升级
支持作业
支持更高自由度的组合查询
自定义签到任务
统计分析
## 快速开始
项目的依赖，`package.json`
安装：`cnpm install`
项目启动：`npm run serve`
构建打包：`npm run build` 打包后，配置的镜像和后台请求地址都没用了
部署后访问地址：http://localhost:8084/index.html#/
相关的主要设置：
### 打包注意事项
注意，一定要配置设置为生产的，注释掉上面开发的，放开下面生产的。否则会导致你的项目跨机器访问失败，各种接口报错，除非你只是在本机访问。
### 高德地图组件配置key
高德组件参考的文档
- https://lbs.amap.com/api/uri-api/guide/mobile-web/point API 展示某个点的位置，
- 高德开发平台 https://lbs.amap.com/
- https://lbs.amap.com/api/uri-api/gettingstarted 入门 查看地理位置，根据坐标展示
- https://elemefe.github.io/vue-amap/#/ 文档
- 打点获取坐标 https://blog.csdn.net/qq_47629187/article/details/125077616
- 和定位有关的代码
- https://www.freesion.com/article/3456274731/
- https://lbs.amap.com/demo/javascript-api/example/map/click-to-get-lnglat
- https://lbs.amap.com/demo/jsapi-v2/example/map/click-to-get-lnglat
- https://blog.csdn.net/weixin_44224921/article/details/126105778
- https://lbs.amap.com/demo/jsapi-v2/example/geocoder/geocoding
- https://lbs.amap.com/api/uri-api/guide/mobile-web/point
当发现高德组件不可用时，需要更换组件的key和安全码
如下，找到位置进行替换。
搜索值得参考的：https://blog.csdn.net/qq_37831545/article/details/127056959
不过部分代码有问题
### 视频开发环境测试
## 碰到的问题
### 打包报 Cannot read property 'thisCompilation' of undefined
运行打包命令 `npm run build` 报 Cannot read property 'thisCompilation' of undefined
解决办法，
先卸载执行 npm uninstall --save extract-text-webpack-plugin
再安装 npm install --save extract-text-webpack-plugin