[柿饼派]制作一个简易的桌面时钟+疫情数据实时更新列表
发布于 2020-02-29 17:28:43
- 本帖最后由 shadowliang 于 2020-2-29 17:36 编辑
最近在入门学习柿饼派，看了一遍文档中心里面的资料和视频中心里面的教程，看了之后觉得要动手练练才能真正理解，于是东拼西凑制作了一个简易的桌面时钟+疫情数据实时更新列表的示例，share 一下。话不多说，先贴两张图。
桌面时钟效果
疫情数据列表
简介
硬件：柿饼派软件：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 界面
page1_panel2 界面
page1_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
