Commit c424f54e authored by liujiangnan's avatar liujiangnan

feat: 线形图

parent 555e7f3b
...@@ -10,6 +10,10 @@ const { ccclass, property } = cc._decorator; ...@@ -10,6 +10,10 @@ const { ccclass, property } = cc._decorator;
@ccclass @ccclass
export default class SceneComponent extends MyCocosSceneComponent { export default class SceneComponent extends MyCocosSceneComponent {
@property(cc.SpriteFrame)
picture: Array<cc.SpriteFrame> = [];
addPreloadImage() { addPreloadImage() {
} }
...@@ -23,20 +27,175 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -23,20 +27,175 @@ export default class SceneComponent extends MyCocosSceneComponent {
async onLoadEnd() { async onLoadEnd() {
// TODO 加载完成后的逻辑写在这里, 下面的代码仅供参考 // TODO 加载完成后的逻辑写在这里, 下面的代码仅供参考
this.initData(); this.initData();
this.initView(); await this.initUserInfo();
await this.initPartInfo();
await this.initSpeakInfo();
await this.initKnowledgeInfo();
await this.drawChart();
this.initBg();
this.initListener(); this.initListener();
} }
token = null;
initData() { initData() {
const middleLayer = cc.find('middleLayer'); const middleLayer = cc.find('middleLayer');
if (!middleLayer) { if (!middleLayer) {
cc.sys.localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywicGhvbmUiOiIxODUwMjEzOTQwNCIsInNpZ24iOiIxNzE1N2NjNS1kYTcyLTQ5N2QtYmY3OS1kY2NlYTViY2JiMjciLCJpYXQiOjE2NTI5NDc4MjQsImV4cCI6MTY1NTUzOTgyNH0.JCnCd7nPKaZNrEgUiGY8T-_9Evu8yHm89O6eLUVxvJs'); cc.sys.localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NCwicGhvbmUiOiIxNTUwMDAwMDAwMSIsInNpZ24iOiI3NWEwNmY0OC1jYTQ4LTQwZmQtYmFmMi02MzhjMzJkYjRmNzciLCJpYXQiOjE2NTI5NTA4MzksImV4cCI6MTY1NTU0MjgzOX0.OHh6__AUX4Z8pOM8IGUXvfIf4N1HMYdhjyhYV6Iwghc');
} }
this.token = cc.sys.localStorage.getItem("token");
} }
initView() { getFomartDate () {
this.initBg(); const date = new Date();
this.initListener(); date.setDate(date.getDate() - date.getDay() + 1);
const monday = date["pattern"]("MM.dd");
date.setDate(date.getDate() + 6);
const sunday = date["pattern"]("MM.dd");
return `${monday} - ${sunday}`;
}
userInfo = null;
async initUserInfo() {
const res:any = await asyncCallNetworkApiGet("/api/oxford/v1/kid/info", {token: this.token});
const userInfo = JSON.parse(res).data;
this.userInfo = userInfo;
const avatarIndex = userInfo.avatar_url ? parseInt(userInfo.avatar_url)-1 : 0;
const usercenter = cc.find("Canvas/usercenter/view/content/scollpage/user_center");
// 头像
cc.find("avatar", usercenter).getComponent(cc.Sprite).spriteFrame = this.picture[avatarIndex];
// 昵称
cc.find("nickname", usercenter).getComponent(cc.Label).string = userInfo.nick_name || "";
// 日历牌
cc.find("learndate", usercenter).getComponent(cc.Label).string = this.getFomartDate();
}
// 学习小结
partCount = 0;
// 本周学习小结
partWeekCount = 0;
async initPartInfo() {
if (!this.userInfo) {
return;
}
const res:any = await asyncCallNetworkApiGet("/api/oxford/v1/kid/part/count", {kidid: this.userInfo.id,token: this.token});
const partInfo = JSON.parse(res).data;
if (partInfo) {
this.partWeekCount = partInfo.weekcount;
this.partCount = partInfo.count;
}
const usercenter = cc.find("Canvas/usercenter/view/content/scollpage/user_center");
cc.find("learndesc", usercenter).getComponent(cc.RichText).string = `<color=#ae441c>本周已经学习</c> <color=#41916e><size=60>${this.partWeekCount}</size></color> <color=#ae441c>个小节</color>`;
const smallbg_1_left = cc.find("Canvas/usercenter/view/content/scollpage/smallbg_1_left");
cc.find("smtextbg/partcount", smallbg_1_left).getComponent(cc.Label).string = this.partCount+"";
cc.find("numberbg/weekpartcount", smallbg_1_left).getComponent(cc.Label).string = "+" + this.partWeekCount;
}
// 开口次数
speakCount = 0;
// 本周开口次数
speakWeekCount = 0;
async initSpeakInfo() {
if (!this.userInfo) {
return;
}
const res:any = await asyncCallNetworkApiGet("/api/oxford/v1/kid/record/count", {kidid: this.userInfo.id,token: this.token});
const speakInfo = JSON.parse(res).data;
if (speakInfo) {
this.speakWeekCount = speakInfo.weekcount;
this.speakCount = speakInfo.count;
}
const smallbg_1_right = cc.find("Canvas/usercenter/view/content/scollpage/smallbg_1_right");
cc.find("smtextbg/partcount", smallbg_1_right).getComponent(cc.Label).string = this.speakCount+"";
cc.find("numberbg/weekpartcount", smallbg_1_right).getComponent(cc.Label).string = "+" + this.speakWeekCount;
}
lettercount = 0;
wordcount = 0;
sentencecount = 0;
async initKnowledgeInfo() {
if (!this.userInfo) {
return;
}
const res:any = await asyncCallNetworkApiGet("/api/oxford/v1/kid/knowledge/count", {kidid: this.userInfo.id,token: this.token});
const knowledgeInfo = JSON.parse(res).data;
if (knowledgeInfo) {
this.lettercount = knowledgeInfo.lettercount || 0;
this.wordcount = knowledgeInfo.wordcount || 0;
this.sentencecount = knowledgeInfo.sentencecount || 0;
}
const smallbg_2_left = cc.find("Canvas/usercenter/view/content/scollpage/smallbg_2_left");
const smallbg_2_middle = cc.find("Canvas/usercenter/view/content/scollpage/smallbg_2_middle");
const smallbg_2_right = cc.find("Canvas/usercenter/view/content/scollpage/smallbg_2_right");
cc.find("lettercount", smallbg_2_left).getComponent(cc.RichText).string = `<color=#41954F>${this.lettercount}</c> <color=#726E6F><size=15>个</size></c>`;
cc.find("wordcount", smallbg_2_middle).getComponent(cc.RichText).string = `<color=#41954F>${this.wordcount}</c> <color=#726E6F><size=15>个</size></c>`;
cc.find("sentencecount", smallbg_2_right).getComponent(cc.RichText).string = `<color=#41954F>${this.sentencecount}</c> <color=#726E6F><size=15>个</size></c>`;
}
learntimes = [0,0,25,50,99,73,8];
learntotal = 0;
average = 0;
async drawChart() {
if (!this.userInfo) {
return;
}
const res:any = await asyncCallNetworkApiGet("/api/oxford/v1/kid/learn/chart", {kidid: this.userInfo.id,token: this.token});
const chartInfo = JSON.parse(res).data;
if (chartInfo) {
// this.learntimes = chartInfo.learntimes;
this.learntotal = chartInfo.learntotal;
this.average = chartInfo.average;
}
const linebg = cc.find("Canvas/usercenter/view/content/scollpage/linebg");
cc.find("textbg/desc", linebg).getComponent(cc.RichText).string = `<color=#726E6F>累计学习时长</c><color=#41954F><size=30> ${this.learntotal} </size></c><color=#726E6F>分钟</c>,<color=#726E6F>平均每日学习</c><color=#41954F><size=30> ${this.average} </size></c><color=#726E6F>分钟</c>`;
const dotHide = cc.find("dothide", linebg);
const xAxis = cc.find("xline", linebg);
const line2 = cc.find("line2", linebg);
const baseY = xAxis.y;
const maxY = line2.y;
const chart_line = cc.find(`chart_line`, linebg).getComponent(cc.Graphics);
const max = Math.max(...this.learntimes);
const itemLen = (maxY - baseY)/max;
cc.find(`dp8/hafy`, linebg).getComponent(cc.Label).string = Math.floor(max/2)+"";
cc.find(`dp9/max`, linebg).getComponent(cc.Label).string = max+"";
// 渲染刻度
const date = new Date();
let monthNum;
for (let i = 1; i < 8; i++) {
const index = i;
const value = this.learntimes[i-1];
date.setDate(date.getDate() - date.getDay() + index);
const xNode = cc.find(`dp${index}/date${index}`, linebg);
const dateStr = date["pattern"]("M月d日");
if (dateStr.split("")[0] != monthNum){
monthNum = dateStr.split("")[0];
xNode.getComponent(cc.Label).string = dateStr;
} else {
xNode.getComponent(cc.Label).string = date["pattern"]("d");
}
const today = new Date();
if (today["pattern"]("d") == date["pattern"]("d")) {
xNode.getComponent(cc.Label).string = "今天";
}
if (i==1){
chart_line.moveTo(xNode.parent.x, itemLen*value+baseY);
} else {
chart_line.lineTo(xNode.parent.x, itemLen*value+baseY);
}
const dotClone = cc.instantiate(dotHide);
dotClone.parent = linebg;
cc.find("pop/text", dotClone).getComponent(cc.Label).string = `${value}分钟`;
dotClone.setPosition(xNode.parent.x, itemLen*value+baseY);
dotClone.active = true;
}
chart_line.stroke();
} }
initBg() { initBg() {
......
import { asyncDelay } from "./util";
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
start () {
}
async onChartDotTapShow(dot: cc.Event) {
const pop = dot.currentTarget.parent.getChildByName("pop");
if (pop.active) {
return;
}
pop.active = true;
await asyncDelay(3);
pop.active = false;
}
// update (dt) {}
}
{
"ver": "1.0.8",
"uuid": "6c01b915-e17f-4996-bf6e-7c864ff8c88b",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file

/**
* 对Date的扩展,将 Date 转化为指定格式的String
* 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
* 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
* eg:
* (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
* (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
* (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
* (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
* (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
*/
Date.prototype.pattern = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
var week = {
"0": "/u65e5",
"1": "/u4e00",
"2": "/u4e8c",
"3": "/u4e09",
"4": "/u56db",
"5": "/u4e94",
"6": "/u516d"
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
if (/(E+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[this.getDay() + ""]);
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
}
Date.prototype.addMinutes = function (minutes) {
this.setMinutes(this.getMinutes() + minutes);
};
Date.prototype.addDays = function (d) {
this.setDate(this.getDate() + d);
};
Date.prototype.addWeeks = function (w) {
this.addDays(w * 7);
};
Date.prototype.addMonths = function (m) {
var d = this.getDate();
this.setMonth(this.getMonth() + m);
if (this.getDate() < d)
this.setDate(0);
};
Date.prototype.addYears = function (y) {
var m = this.getMonth();
this.setFullYear(this.getFullYear() + y);
if (m < this.getMonth()) {
this.setDate(0);
}
};
/**
*时间格式处理
*/
Date.prototype.formatString = function formatTime(timeStr) {
var result = '0000-00-00 00:00:00:000';
if (timeStr && timeStr.length == 17) {
var y = timeStr.substr(0, 4);
var m = timeStr.substr(4, 2);
var d = timeStr.substr(6, 2);
var h = timeStr.substr(8, 2);
var min = timeStr.substr(10, 2);
var s = timeStr.substr(12, 2);
var l = timeStr.substr(14, 3);
result = y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
}
return result;
};
{
"ver": "1.0.8",
"uuid": "4b91bf82-f7a4-46c4-bb91-fd6af8643571",
"isPlugin": true,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "b3ca19d7-0573-4cec-8938-619c9db15af4",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 19,
"height": 19,
"platformSettings": {},
"subMetas": {
"dot": {
"ver": "1.0.4",
"uuid": "3d06fb38-52e8-4658-b45c-416b0c62c402",
"rawTextureUuid": "b3ca19d7-0573-4cec-8938-619c9db15af4",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 19,
"height": 19,
"rawWidth": 19,
"rawHeight": 19,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "6cf4c456-5298-4a28-8cec-0d502a59ed11",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 82,
"height": 49,
"platformSettings": {},
"subMetas": {
"pop": {
"ver": "1.0.4",
"uuid": "fc79f6a3-78f4-463c-b021-27fbaf66bae1",
"rawTextureUuid": "6cf4c456-5298-4a28-8cec-0d502a59ed11",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 82,
"height": 49,
"rawWidth": 82,
"rawHeight": 49,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment