[柿饼派]制作一个简易的桌面时钟+疫情数据实时更新列表

发布于 2020-02-29 17:28:43
    本帖最后由 shadowliang 于 2020-2-29 17:36 编辑


最近在入门学习柿饼派,看了一遍文档中心里面的资料和视频中心里面的教程,看了之后觉得要动手练练才能真正理解,于是东拼西凑制作了一个简易的桌面时钟+疫情数据实时更新列表的示例,share 一下。话不多说,先贴两张图。
时钟效果图.jpg
桌面时钟效果
疫情数据效果图.jpg
疫情数据列表
简介
硬件:柿饼派软件:Persimmon UI Builder 数据来源:1.天气数据来自天气 api :2.网络时钟数据来自: http://quan.suning.com/getSysTime.do 3.疫情数据来自:https://lab.isaaclin.cn/nCoV/api/area?latest=1&province=%E5%B9%BF%E4%B8%9C%E7%9C%81主要功能
1.可以实时更新指定地区的气象数据包括天气情况、温度、湿度2.可以通过网络校准时钟数据实时更新时钟。3.可以实时获取指定省份的最新的疫情数据。4.初次联网成功后会记录连接热点的信息,开机时自动重连。实现过程* UI 设计部分

UI 界面采用 2个 page 页面,其中page1 中放置 DotIndicator 控件card 控件,并在 card 控件中放置 3个 panel ,panel 1 为展示桌面时钟+天气信息,panel 2 为展示 WIFI 操作页面,在 panel2 中放置 listctrl 控件展示 附近 WiFi 信息并支持按钮触发连接 WiFi的操作,进入 page2 页面输入 WiFi 密码进行联网,panel3 中放置 listctrl 控件为展示疫情信息,可以通过左右滑动切换到不同的 panel 中,page2 中主要是 wifi 联网的密码输入界面,由 page1中的 panel2 页面中按钮触发进行切换。相关的界面如下:page1_panel1.pngpage1_panel1 界面page1_panel2.pngpage1_panel2 界面page1_panel3.pngpage1_panel3 界面




* 数据更新部分

采用定时器定时发送请求,获得原始数据,对原始数据进行解析,把解析得到的数据展示到对应的页面中。下面是获取数据的核心代码。
//1.获取天气数据
getWeathearInfo:function(event)
{
var that = this;
var str = 0;

console.log("getWeathrerInfo....")

var req1 = pm.request({
url: '/api?version=v6&appid=31972938&appsecret=e3fvZnAN&city='+localcity,
data:{
x:'',
y:''
},

header:{
"Content-Type":"application/json",
},

success:function(res)
{
console.log('request success'),
console.log(res.data),
console.log(res.statusCode)
console.log("json_par")
str = res.data.toString('utf8');
console.log(str)
json_obj = JSON.parse(str);
console.log(json_obj)
week = json_obj.week;
that.tempdataupdate();

},
complete:function()
{
console.log('request complete')

},

fail:function(){
console.log('request failed')
}
})
},


//界面上更新对应的数据
tempdataupdate:function(){
console.log("<< tempdataupdate")
this.setData({img_weather:{value:json_obj.wea_img+'.png',refresh : true}})
this.setData({hum_label :{value : json_obj.humidity,refresh : true}});
this.setData({tem_label :{value : json_obj.tem+"°C",refresh : true}});
this.setData({weather_label :{value : json_obj.wea,refresh : true}});
this.setData({week_label :{value : week,refresh : true}});
},

获取时间数据
getNetTimeInfo:function(){
var that = this;
var str = 0;

console.log("Get NetTimeInfo....")

var req1 = pm.request({
url: 'http://quan.suning.com/getSysTime.do',
data:{
x:'',
y:''
},

header:{
"Content-Type":"application/json",
},

success:function(res)
{
console.log('request success'),
console.log(res.data),
console.log(res.statusCode)
console.log("json_par")
str = res.data.toString('utf8');
console.log(str)
json_obj1 = JSON.parse(str);
console.log(json_obj1)
console.log("systemtime:"+json_obj1.sysTime2)

var temp = json_obj1.sysTime2.toString();
console.log("length:"+temp.length)
console.log(temp)
year = temp.substring(0,4);
console.log(year)
month = temp.substring(5,7);
console.log(month)
day = temp.substring(8,10);
console.log(day)
console.log(year+':'+month+':'+day);
var nethour = temp.substring(11,13);
hours = parseInt(nethour, 10);
console.log(nethour);
var netminutes = temp.substring(14,16);
minutes = parseInt(netminutes, 10);
console.log(netminutes);
var netseconds = temp.substring(17,19);
seconds = parseInt(netseconds, 10);
console.log(netseconds)
that.updateDate();
},
complete:function()
{
console.log('request complete')

},

fail:function(){
console.log('request failed')
}
})
},

//更新界面的数据
updateDate:function()
{
this.setData({year_label :{value : year,refresh : true}});
this.setData({month_label :{value : month,refresh : true}});
this.setData({day_label :{value : day,refresh : true}});

},

获取疫情数据
//获取疫情数据
getrealData:function(){
var that = this;
var str = 0;

console.log("Get RealData....")

var req1 = pm.request({
url: 'https://lab.isaaclin.cn/nCoV/api/area?latest=1&province=%E5%B9%BF%E4%B8%9C%E7%9C%81',
data:{
x:'',
y:''
},

header:{
"Content-Type":"application/json",
},

success:function(res)
{
console.log('request success'),
console.log(res.data),
console.log(res.statusCode)
str = res.data.toString('utf8');
console.log(str)
json_obj2 = JSON.parse(str);
console.log('省份'+json_obj2.results[0].provinceName)
console.log('现有确诊数量'+json_obj2.results[0].currentConfirmedCount)
console.log('累计确诊数量'+json_obj2.results[0].confirmedCount)
console.log('治愈数量'+json_obj2.results[0].curedCount)
console.log('死亡人数'+json_obj2.results[0].deadCount)
that.updataShow();

},
complete:function()
{
console.log('request complete')

},

fail:function(){
console.log('request failed')
}
})
},

// 更新UI 界面的数据
updataShow:function(){
console.log(">> updataShow" + "length="+json_obj2.length);
var dataList = new Array();
var ProvinceItem = new Object();
ProvinceItem.cityname = {value :json_obj2.results[0].provinceName };
ProvinceItem.currentConfirmedCount = { value: json_obj2.results[0].currentConfirmedCount };
ProvinceItem.confirmedCount = { value: json_obj2.results[0].confirmedCount };
ProvinceItem.curedCount = { value: json_obj2.results[0].curedCount };
ProvinceItem.deadCount = { value: json_obj2.results[0].deadCount };
dataList.push(ProvinceItem);

for(var i = 0 ; i < 20; i++)
{
var item = json_obj2.results[0].cities;
console.log(item.cityName);
var realdataItem = new Object();

realdataItem.cityname = {value : item.cityName};
realdataItem.currentConfirmedCount = {value : item.currentConfirmedCount};
realdataItem.confirmedCount = {value : item.confirmedCount};
realdataItem.curedCount = {value :item.curedCount };
realdataItem.deadCount = {value : item.deadCount};

dataList.push(realdataItem);
}
listPage.setData({listctrl1 : {empty : true}});
listPage.setData({listctrl1:{page : listPage, xml : "Panels/realdata", items : dataList, refresh:true}})
console.log("datalist refresh")

},
    总结
    刚开始入门学习柿饼派,深有体会的是柿饼派的 UI 真的挺方便的,上手很快,并且可以脱离板子,编译,下载,调试的苦恼,当然例如网络模块这些还是得依靠在板子上调试才可以,关于柿饼派的学习还得多熟悉文档提供的 api说明,还可以参考Persimmon UI Builder 里面帮助选项中的 online demo 中的炫酷示例进行学习。

查看更多

关注者
0
被浏览
1.5k
10 个回答
霹雳大乌龙
霹雳大乌龙 2020-02-29
赞一个,可以把图片背景透明了,这样就不会显示一块块的背景,UI要好看最重要:P
xingchen8910
xingchen8910 2020-03-01
最近正在学这个,请问大侠两个http quest定时器怎么调用,一个定时器同时调用两个吗?
shadowliang
shadowliang 2020-03-02
xingchen8910 发表于 2020-3-1 18:54
最近正在学这个,请问大侠两个http quest定时器怎么调用,一个定时器同时调用两个吗? ...


可以用两个 timer 定时 http request ,也可以一个 timer 分别同时调用两个 http request,一个 http request 请求成功后再 调用 第二个 http request。
xingchen8910
xingchen8910 2020-03-02
shadowliang 发表于 2020-3-2 09:36
可以用两个 timer 定时 http request ,也可以一个 timer 分别同时调用两个 http request,一个 http requ ...


两种方法都尝试过,先说场景一个北京时间调用,一个天气调用,第一种,使用两个定时器--时间调用1s,天气调用3s,此时天气数据和时间数据均可显示,但是时间会在每隔3s的时候少显示1s,不知为何;第二种,使用一个1s定时器先判断天气http request成功后再调用时间请求,此时时间显示仍旧会少1s每隔1s就少显示1s,例:秒钟显示1,3,5,7...,如果是先判断时钟再调用天气,时钟显示正常,但天气数据要每隔10几秒钟才能请求成功1次,第一种情况如下图realo_clock_wea.gif

shadowliang
shadowliang 2020-03-02
xingchen8910 发表于 2020-3-2 17:03
两种方法都尝试过,先说场景一个北京时间调用,一个天气调用,第一种,使用两个定时器--时间调用1s,天气 ...


想知道你的时钟页面的更新也是通过定时 1s http request 北京时间,是请求成功后再更新页面的?你的情况有可能是页面更新不及时导致的?
xingchen8910
xingchen8910 2020-03-03
shadowliang 发表于 2020-3-2 18:16
想知道你的时钟页面的更新也是通过定时 1s http request 北京时间,是请求成功后再更新页面的?你的情况 ...


定时器函数调用如下: wea_suc_flag是天气调用成功标志位,两个调用都是请求成功之后才刷新的页面,天气和时钟函数源自本主题作者‘shadowliang’,具体可参照本帖内容
定时调用.png

xingchen8910
xingchen8910 2020-03-03
shadowliang 发表于 2020-3-2 18:16
想知道你的时钟页面的更新也是通过定时 1s http request 北京时间,是请求成功后再更新页面的?你的情况 ...


没仔细看您就是本帖作者:loveliness:
shadowliang
shadowliang 2020-03-04
xingchen8910 发表于 2020-3-3 17:28
没仔细看您就是本帖作者


我的例程中有一个定时 1s 的timer 作为本地时钟的计时器的,在没有网络的时候也可以正常跑时钟,有网络的时候会 1min 中同步一次网络时间和天气信息,疫情信息每 5 min 同步一次,我的示例运行目测没有出现明显的时间丢秒的情况。
xingchen8910
xingchen8910 2020-03-04
shadowliang 发表于 2020-3-4 09:34
我的例程中有一个定时 1s 的timer 作为本地时钟的计时器的,在没有网络的时候也可以正常跑时钟,有网络的 ...


谢谢老哥,懂了,时钟还是以本地计时为基础,网络做数据同步用

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友

手机
浏览

扫码手机浏览