基于鴻蒙運(yùn)維的園區(qū)智慧微電網(wǎng)實(shí)戰(zhàn)
我們項(xiàng)目主要是為了實(shí)現(xiàn)對(duì)環(huán)境溫度、濕度、風(fēng)力等數(shù)據(jù)的實(shí)時(shí)獲取，并且可以實(shí)時(shí)獲取硬件端測(cè)試的發(fā)電量，電池電壓、電流，等數(shù)據(jù)實(shí)時(shí)監(jiān)控電池的健康狀況。作為一個(gè)剛?cè)腴T(mén)的開(kāi)發(fā)者，在鴻蒙開(kāi)發(fā)的過(guò)程中確實(shí)遇到了很多困難。這些困難主要是在于如何將一些后端的數(shù)據(jù)和前端APP聯(lián)系起來(lái)，讓他查看起來(lái)美觀清晰，簡(jiǎn)單明了。我們根據(jù)官方提供的全面資料，自己不斷的嘗試與調(diào)整，最終也是有了初步的結(jié)果。
運(yùn)行環(huán)境
DevEco Studio版本：DevEco Studio 3.1.1 Release及以上版本。
鴻蒙 SDK版本：API 9， 鴻蒙 3.2 Release。
前期準(zhǔn)備
軟件安裝與環(huán)境搭建
這一部分的內(nèi)容在官方資料文檔里有著十分清晰的講解，并且鴻蒙本身的安裝難度并不高，所以這里就不多說(shuō)了，如果有問(wèn)題可以聯(lián)系我們。
創(chuàng)建項(xiàng)目
創(chuàng)建新項(xiàng)目時(shí)，點(diǎn)擊File按鈕，在彈出的列表里點(diǎn)擊New，然后創(chuàng)建New Project。輸入自己的項(xiàng)目名和文件存放位置，本項(xiàng)目采用的ArkTS語(yǔ)言進(jìn)行開(kāi)發(fā)。
圖2.2 項(xiàng)目創(chuàng)建
真機(jī)簽名
為了進(jìn)行程序在DAYU200上的調(diào)試與開(kāi)發(fā)，首先需要進(jìn)行真機(jī)簽名，可以通過(guò)DevEco Studio來(lái)進(jìn)行自動(dòng)簽名
圖2.3 真機(jī)簽名
主要功能
登錄
我們打開(kāi)應(yīng)用之后首先就是登錄界面，能夠?qū)崿F(xiàn)賬號(hào)登陸、賬號(hào)注冊(cè)及其他登錄方式。登錄界面主要由文本、文本框、按鈕以及一些為了美觀的圖片組成。
Image($r("app.media.tupian"))
.width(240)
.height(160)
Text('登陸界面')
.fontSize(40)
.fontweight(Fontweight.Medium)
.height(80)
Text('登陸賬號(hào)以使用更多服務(wù)')
.fontSize(18)
.fontWeight(FontWeight.Regular)
.height(50)
TextInput({placeholder:'賬號(hào)'})
.maxLength(11)
.type(InputType.Number)
.height(50)
TextInput({placeholder:'密碼'})
.maxLength(11)
.type(InputType.Password)
.height(50)
.onChange((value: string)=>{
this.account = value;
})在忘記密碼時(shí)可以選用方便的短信登錄或者重置密碼，沒(méi)有賬號(hào)也可以選擇注冊(cè)賬號(hào)。
Row() {
Text('短信驗(yàn)證碼登陸')
.fontSize(15).fontColor(0x317aff)
Text('忘記密碼')
.fontSize(15).fontColor(0x317aff)
}.width('100%').justifyContent(FlexAlign.SpaceBetween)
Text('Circle button').fontSize(9).fontColor(0xFFFFFF)
Button('登陸',{type: ButtonType.Capsule}).height(50).width(100).fontSize(20)
.onClick(() =>{router.push({ url:"pages/tabsdemo" })})
Button('注冊(cè)賬號(hào)',{type: ButtonType.Capsule}).height(50).width(100)
.backgroundColor(0xFFFFFF).fontColor(0x317aff)或者是使用其他的方式去進(jìn)行登錄。
Text('其他登陸方式').fontColor(0xCCCCCC).height(50)
Row() {
Button('微信',{type: ButtonType.Circle})
.backgroundColor(0x00CC33).height(70)
Button('QQ',{type: ButtonType.Circle})
.backgroundColor(0x33CCFF).height(70)
Button('郵箱',{type: ButtonType.Circle})
.backgroundColor(0xFFFF33).height(70).fontColor(0x317aff)
}.width('100%').justifyContent(FlexAlign.SpaceEvenly)
圖3.1 登錄界面展示
發(fā)電設(shè)備全生命周期監(jiān)測(cè)
?這部分代碼我們通過(guò)Text、Image等基本小組件保證整體界面的美觀性，并且通過(guò)Onclick等組件觸發(fā)，使用戶(hù)可以選擇自己想要具體查看的數(shù)據(jù)。
Column({space:10}){
Image($r("app.media.tupian")).width(300).height(200)}顯示天氣的文字與圖片，并且讓其點(diǎn)擊之后可以跳轉(zhuǎn)到相關(guān)界面。
Row(){
Image('/common/images/image1/tianqi.png').height(60).width(60)
Text(' 當(dāng)前天氣').fontSize(35).width('70%')
.onClick(() =>{router.push({ url:"pages/shebei/tianqi1" })})
Image('/common/images/yjt.png').height(60).width(60)
.onClick(() =>{router.push({ url:"pages/shebei/tianqi1" })})
}.backgroundColor('#CDFFCD').width('100%')顯示風(fēng)力發(fā)電的文字與圖片，并且讓其點(diǎn)擊之后可以跳轉(zhuǎn)到相關(guān)界面。
Row(){
Image('/common/images/image1/fengli.png').height(60).width(60)
Text(' 風(fēng)力發(fā)電').fontSize(35).width('70%')
.onClick(() =>{router.push({ url:"pages/shebei/fengli" })})
Image('/common/images/yjt.png').height(60).width(60)
.onClick(() =>{router.push({ url:"pages/shebei/fengli" })})
}.backgroundColor('#CDFFCD').width('100%')顯示太陽(yáng)能發(fā)電的文字與圖片，并且讓其點(diǎn)擊之后可以跳轉(zhuǎn)到相關(guān)界面。
Row(){
Image('/common/images/image1/tyn.png').height(60).width(60)
Text(' 太陽(yáng)能').fontSize(35).width('70%')
.onClick(() =>{router.push({ url:"pages/shebei/tyn" })})
Image('/common/images/yjt.png').height(60).width(60)
.onClick(() =>{router.push({ url:"pages/shebei/tyn" })})
}.backgroundColor('#CDFFCD').width('100%')顯示環(huán)境溫度的文字與圖片，并且讓其點(diǎn)擊之后可以跳轉(zhuǎn)到相關(guān)界面。
Row(){
Image('/common/images/image1/wendu.png').height(60).width(60)
Text(' 溫度').fontSize(35).width('70%')
.onClick(() =>{router.push({ url:"pages/shebei/wendu" })})
Image('/common/images/yjt.png').height(60).width(60)
.onClick(() =>{router.push({ url:"pages/shebei/wendu" })})
}.backgroundColor('#CDFFCD').width('100%')顯示環(huán)境溫度的文字與圖片，并且讓其點(diǎn)擊之后可以跳轉(zhuǎn)到相關(guān)界面。
Row(){
Image('/common/images/image1/shidu.png').height(60).width(60)
Text(' 濕度').fontSize(35).width('70%')
.onClick(() =>{router.push({ url:"pages/shebei/shidu" })})
Image('/common/images/yjt.png').height(60).width(60)
.onClick(() =>{router.push({ url:"pages/shebei/shidu" })})
}.backgroundColor('#CDFFCD').width('100%')
圖3.2 設(shè)備界面展示
電量預(yù)測(cè)
關(guān)于整體界面的代碼和上面發(fā)電設(shè)備的代碼形式基本一致，就不在重復(fù)展示了，只展示一下這個(gè)界面的效果，以及點(diǎn)擊進(jìn)去之后的理想效果。
圖3.3.1電池的主要界面
圖3.3.2 電流電壓界面展示
圖3.3.3 電池溫度界面展示
主體界面展示
我們通過(guò)toolbar和tabs組件，使其可夠?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)，滑動(dòng)翻頁(yè)，保證三個(gè)主要頁(yè)面的正常使用與區(qū)分。這一塊由于有些復(fù)雜，導(dǎo)致一些代碼有些長(zhǎng)，看起來(lái)有點(diǎn)凌亂。
struct Tabsdemo {
@State currentIndex: number = 0
@Builder TabBuilder0(index: number){
Column(){
Image(this.currentIndex === index?'/common/images/shebei1.png':'/common/images/shebei.png')
.width(40).height(40)
Text('設(shè)備管理').fontColor(this.currentIndex === index ? '#4FB6C8': '#838383')
.fontSize(15)
}.width('100%')
}
@Builder TabBuilder1(index: number){
Column(){
Image(this.currentIndex === index?'/common/images/dianchi1.png':'/common/images/dianchi.png')
.width(40).height(40)
Text('電池監(jiān)測(cè)').fontColor(this.currentIndex === index ? '#4FB6C8':'#838383')
.fontSize(15)
}.width('100%')
}
@Builder TabBuilder2(index: number){
Column(){
Image(this.currentIndex===index?'/common/images/wode1.png':'/common/images/wode.png')
.width(55).height(55)
}.width('100%')
}
}在我們前面的代碼也有些展示，我們通過(guò)onclick組件與router.push組合使用，通過(guò)點(diǎn)按實(shí)現(xiàn)具體界面的切換，例如：
Text(' 當(dāng)前天氣').fontSize(35).width('70%')
.onClick(() =>{router.push({ url:"pages/shebei/tianqi1" })})我們界面的切換基本就是采用這種形式。
圖3.4 界面切換展示
展望
隨著時(shí)代的進(jìn)步，電子信息技術(shù)不斷發(fā)展，互聯(lián)網(wǎng)行業(yè)也需要不斷前進(jìn)。而鴻蒙作為一款新興的操作系統(tǒng)，注重分布式能力，使得設(shè)備之間能夠更好地協(xié)同工作，共享資源，提升整體系統(tǒng)性能。這些為開(kāi)發(fā)者提供了更靈活的方式，使得開(kāi)發(fā)者越來(lái)越多的開(kāi)始接觸鴻蒙操作系統(tǒng)，鴻蒙也將成為未來(lái)科技市場(chǎng)的重要組成部分。
在這個(gè)過(guò)程中我們也將要不斷的學(xué)習(xí)進(jìn)步，向外交流以適應(yīng)現(xiàn)在這個(gè)充滿(mǎn)創(chuàng)新的時(shí)代。
