RT-Thread-[柿饼派]制作一个简易的桌面时钟+疫情数据实时更新列表RT-Thread问答社区

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

发布于 2020-02-29 17:28:43 浏览：4882 订阅该版

* 本帖最后由 shadowliang 于 2020-2-29 17:36 编辑 *

最近在入门学习柿饼派，看了一遍文档中心里面的资料和视频中心里面的教程，看了之后觉得要动手练练才能真正理解，于是东拼西凑制作了一个简易的桌面时钟+疫情数据实时更新列表的示例，share 一下。话不多说，先贴两张图。
[align=center]![时钟效果图.jpg](/uploads/202002/29/165835hz4et5u1git5hc0i.jpg)
[align=center]桌面时钟效果
[align=center]![疫情数据效果图.jpg](/uploads/202002/29/165836r3dqqdd25zd2p2s5.jpg)
[align=center]疫情数据列表
**简介**硬件：柿饼派软件：Persimmon UI Builder 数据来源：1.天气数据来自天气 api :[https://tianqiapi.com](https://tianqiapi.com)2.网络时钟数据来自： [http://quan.suning.com/getSysTime.do](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](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 页面中按钮触发进行切换。相关的界面如下：[align=center]![page1_panel1.png](/uploads/202002/29/165835n2lxzokunvxmuwkm.png)[align=center]page1_panel1 界面[align=center]![page1_panel2.png](/uploads/202002/29/165835yli1ff188y1lwz88.png)[align=center]page1_panel2 界面[align=center]![page1_panel3.png](/uploads/202002/29/165835bb6qriqbmsvvusrs.png)[align=center]page1_panel3 界面

* 数据更新部分

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

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

var req1 = pm.request({
            url: 'https://tianqiapi.com/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 中的炫酷示例进行学习。*