其乐融融的IT技术小站

基于鸿蒙运维的园区智慧微电网实战

  • 其乐融融 发布于 2024-05-09
  • 分类：Harmony
  • 阅读()
  • 评论()
内容页头部广告位

我们项目主要是为了实现对环境温度、湿度、风力等数据的实时获取，并且可以实时获取硬件端测试的发电量，电池电压、电流，等数据实时监控电池的健康状况。作为一个刚入门的开发者，在鸿蒙开发的过程中确实遇到了很多困难。这些困难主要是在于如何将一些后端的数据和前端APP联系起来，让他查看起来美观清晰，简单明了。我们根据官方提供的全面资料，自己不断的尝试与调整，最终也是有了初步的结果。

运行环境

DevEco Studio版本：DevEco Studio 3.1.1 Release及以上版本。

鸿蒙 SDK版本：API 9， 鸿蒙 3.2 Release。

前期准备

软件安装与环境搭建

这一部分的内容在官方资料文档里有着十分清晰的讲解，并且鸿蒙本身的安装难度并不高，所以这里就不多说了，如果有问题可以联系我们。

创建项目

创建新项目时，点击File按钮，在弹出的列表里点击New，然后创建New Project。输入自己的项目名和文件存放位置，本项目采用的ArkTS语言进行开发。

图2.2%20项目创建

真机签名

为了进行程序在DAYU200上的调试与开发，首先需要进行真机签名，可以通过DevEco%20Studio来进行自动签名

图2.3%20真机签名

主要功能

登录

我们打开应用之后首先就是登录界面，能够实现账号登陆、账号注册及其他登录方式。登录界面主要由文本、文本框、按钮以及一些为了美观的图片组成。

Image($r("app.media.tupian"))
%20%20%20%20%20%20.width(240)
%20%20%20%20%20%20.height(160)%20%20
%20%20%20%20Text('登陆界面')
%20%20%20%20%20%20.fontSize(40)
%20%20%20%20%20%20.fontweight(Fontweight.Medium)
%20%20%20%20%20%20.height(80)
%20%20%20%20Text('登陆账号以使用更多服务')
%20%20%20%20%20%20.fontSize(18)
%20%20%20%20%20%20.fontWeight(FontWeight.Regular)
%20%20%20%20%20%20.height(50)
%20%20%20%20TextInput({placeholder:'账号'})
%20%20%20%20%20%20.maxLength(11)
%20%20%20%20%20%20.type(InputType.Number)
%20%20%20%20%20%20.height(50)
%20%20%20%20TextInput({placeholder:'密码'})
%20%20%20%20%20%20.maxLength(11)
%20%20%20%20%20%20.type(InputType.Password)
%20%20%20%20%20%20.height(50)
%20%20%20%20%20%20.onChange((value:%20string)=>{
%20%20%20%20%20%20%20%20this.account%20=%20value;
%20%20%20%20%20%20})

在忘记密码时可以选用方便的短信登录或者重置密码，没有账号也可以选择注册账号。

Row()%20{
%20%20%20%20%20%20Text('短信验证码登陆')
%20%20%20%20%20%20%20%20.fontSize(15).fontColor(0x317aff)
%20%20%20%20%20%20Text('忘记密码')
%20%20%20%20%20%20%20%20.fontSize(15).fontColor(0x317aff)
%20%20%20%20}.width('100%').justifyContent(FlexAlign.SpaceBetween)
%20%20%20%20Text('Circle%20button').fontSize(9).fontColor(0xFFFFFF)
%20%20%20%20Button('登陆',{type:%20ButtonType.Capsule}).height(50).width(100).fontSize(20)
%20%20%20%20%20%20.onClick(()%20=>{router.push({%20url:"pages/tabsdemo"%20})})
%20%20%20%20Button('注册账号',{type:%20ButtonType.Capsule}).height(50).width(100)
%20%20%20%20%20%20.backgroundColor(0xFFFFFF).fontColor(0x317aff)

或者是使用其他的方式去进行登录。

Text('其他登陆方式').fontColor(0xCCCCCC).height(50)
%20%20%20%20Row()%20{
%20%20%20%20%20%20Button('微信',{type:%20ButtonType.Circle})
%20%20%20%20%20%20%20%20.backgroundColor(0x00CC33).height(70)
%20%20%20%20%20%20Button('QQ',{type:%20ButtonType.Circle})
%20%20%20%20%20%20%20%20.backgroundColor(0x33CCFF).height(70)
%20%20%20%20%20%20Button('邮箱',{type:%20ButtonType.Circle})
%20%20%20%20%20%20%20%20.backgroundColor(0xFFFF33).height(70).fontColor(0x317aff)
%20%20%20%20}.width('100%').justifyContent(FlexAlign.SpaceEvenly)

图3.1%20登录界面展示

发电设备全生命周期监测

 这部分代码我们通过Text、Image等基本小组件保证整体界面的美观性，并且通过Onclick等组件触发，使用户可以选择自己想要具体查看的数据。

Column({space:10}){
%20%20%20%20%20%20Image($r("app.media.tupian")).width(300).height(200)}

显示天气的文字与图片，并且让其点击之后可以跳转到相关界面。

Row(){
%20%20%20%20%20%20%20%20Image('/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%20设备界面展示

电量预测

关于整体界面的代码和上面发电设备的代码形式基本一致，就不在重复展示了，只展示一下这个界面的效果，以及点击进去之后的理想效果。

图3.3.1电池的主要界面

图3.3.2%20电流电压界面展示

图3.3.3%20电池温度界面展示

主体界面展示

我们通过toolbar和tabs组件，使其可够实现页面跳转，滑动翻页，保证三个主要页面的正常使用与区分。这一块由于有些复杂，导致一些代码有些长，看起来有点凌乱。

struct%20Tabsdemo%20{
%20%20%20%20%20%20@State%20currentIndex:%20number%20=%200
%20%20%20%20%20%20@Builder%20TabBuilder0(index:%20number){
%20%20%20%20%20%20%20%20Column(){
%20%20%20%20%20%20%20%20%20%20Image(this.currentIndex%20===%20index?'/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 界面切换展示

展望

随着时代的进步，电子信息技术不断发展，互联网行业也需要不断前进。而鸿蒙作为一款新兴的操作系统，注重分布式能力，使得设备之间能够更好地协同工作，共享资源，提升整体系统性能。这些为开发者提供了更灵活的方式，使得开发者越来越多的开始接触鸿蒙操作系统，鸿蒙也将成为未来科技市场的重要组成部分。

在这个过程中我们也将要不断的学习进步，向外交流以适应现在这个充满创新的时代。

内容页底部广告位1
赞 ()
分享到：更多 ()
标签：鸿蒙   操作系统   智慧微电网
内容页底部广告位2

相关推荐

内容页底部广告位3
留言与评论（共有 0 条评论）
   
验证码：