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