当前位置：首页 > news >正文

Cordova与OpenHarmony浇水记录系统

news 2026/3/26 15:32:12

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

浇水记录系统概述

浇水记录系统是植物养护应用的核心功能之一。它记录用户对植物的浇水操作，帮助用户了解植物的浇水历史和规律。在Cordova框架与OpenHarmony系统的结合下，我们需要实现一个完整的浇水记录系统，包括记录的创建、查询、统计和提醒功能。

浇水记录数据模型

classWateringRecord{constructor(plantId,amount,notes){this.id='water_'+Date.now();this.plantId=plantId;this.amount=amount;// 毫升this.date=newDate();this.notes=notes;this.soilMoisture=null;// 土壤湿度百分比}}classWateringManager{constructor(){this.records=[];this.loadFromStorage();}addWateringRecord(plantId,amount,notes){constrecord=newWateringRecord(plantId,amount,notes);this.records.push(record);this.saveToStorage();returnrecord;}getWateringRecordsForPlant(plantId){returnthis.records.filter(r=>r.plantId===plantId).sort((a,b)=>newDate(b.date)-newDate(a.date));}getLastWateringDate(plantId){constrecords=this.getWateringRecordsForPlant(plantId);returnrecords.length>0?records[0].date:null;}}

这个浇水记录数据模型定义了WateringRecord类和WateringManager类。WateringRecord类包含浇水的详细信息，包括植物ID、浇水量、日期和备注。WateringManager类管理所有浇水记录，提供了添加记录和查询功能。

与OpenHarmony传感器的集成

functionrecordWateringWithSensorData(plantId,amount,notes){// 获取土壤湿度传感器数据cordova.exec(function(sensorData){console.log("传感器数据获取成功");constrecord=newWateringRecord(plantId,amount,notes);record.soilMoisture=sensorData.moisture;wateringManager.records.push(record);wateringManager.saveToStorage();// 保存到数据库saveWateringRecordToDatabase(record);showToast('浇水记录已保存');},function(error){console.error("传感器数据获取失败:",error);// 即使传感器失败，仍然保存记录constrecord=wateringManager.addWateringRecord(plantId,amount,notes);saveWateringRecordToDatabase(record);},"SensorPlugin","getSoilMoisture",[plantId]);}

这段代码展示了如何与OpenHarmony的传感器服务集成。通过SensorPlugin，我们可以获取土壤湿度等传感器数据，并将其与浇水记录关联。这提供了更加准确的浇水数据。

浇水记录列表展示

functionrenderWateringRecords(plantId){constplant=plants.find(p=>p.id===plantId);if(!plant)return;constrecords=wateringManager.getWateringRecordsForPlant(plantId);constcontainer=document.getElementById('page-container');container.innerHTML=`<div class="watering-records-container"> <h2>${plant.name}的浇水记录</h2> <button class="add-record-btn" onclick="showAddWateringRecordDialog('${plantId}')"> ➕ 添加浇水记录 </button> </div>`;if(records.length===0){container.innerHTML+='<p class="empty-message">还没有浇水记录</p>';return;}constrecordsList=document.createElement('div');recordsList.className='records-list';records.forEach(record=>{constrecordItem=document.createElement('div');recordItem.className='record-item';recordItem.innerHTML=`<div class="record-info"> <p class="record-date">${record.date.toLocaleString('zh-CN')}</p> <p class="record-amount">💧 浇水量:${record.amount}ml</p>${record.soilMoisture?`<p class="soil-moisture">土壤湿度:${record.soilMoisture}%</p>`:''}${record.notes?`<p class="record-notes">备注:${record.notes}</p>`:''}</div> <div class="record-actions"> <button onclick="editWateringRecord('${record.id}')">编辑</button> <button onclick="deleteWateringRecord('${record.id}')">删除</button> </div>`;recordsList.appendChild(recordItem);});container.appendChild(recordsList);}

这个函数负责渲染浇水记录列表。它显示了特定植物的所有浇水记录，包括日期、浇水量、土壤湿度和备注。用户可以通过"编辑"和"删除"按钮管理记录。这种设计提供了清晰的记录展示。

添加浇水记录对话框

functionshowAddWateringRecordDialog(plantId){constdialog=document.createElement('div');dialog.className='modal-dialog';dialog.innerHTML=`<div class="modal-content"> <h3>添加浇水记录</h3> <form id="add-watering-form"> <div class="form-group"> <label>浇水量 (毫升)</label> <input type="number" id="watering-amount" min="0" required> </div> <div class="form-group"> <label>浇水日期</label> <input type="datetime-local" id="watering-date" required> </div> <div class="form-group"> <label>备注</label> <textarea id="watering-notes"></textarea> </div> <div class="form-actions"> <button type="submit">保存</button> <button type="button" onclick="closeDialog()">取消</button> </div> </form> </div>`;document.getElementById('modal-container').appendChild(dialog);// 设置默认日期为当前时间constnow=newDate();document.getElementById('watering-date').value=now.toISOString().slice(0,16);document.getElementById('add-watering-form').addEventListener('submit',function(e){e.preventDefault();constamount=parseFloat(document.getElementById('watering-amount').value);constdate=newDate(document.getElementById('watering-date').value);constnotes=document.getElementById('watering-notes').value;constrecord=newWateringRecord(plantId,amount,notes);record.date=date;wateringManager.records.push(record);wateringManager.saveToStorage();saveWateringRecordToDatabase(record);closeDialog();renderWateringRecords(plantId);showToast('浇水记录已添加');});}

这个函数创建并显示添加浇水记录的对话框。用户可以输入浇水量、日期和备注。提交后，新记录会被添加到wateringManager中，并保存到数据库。这种设计提供了灵活的记录输入方式。

浇水统计功能

classWateringStatistics{constructor(wateringManager){this.wateringManager=wateringManager;}getTotalWateringCount(plantId){returnthis.wateringManager.getWateringRecordsForPlant(plantId).length;}getAverageWateringAmount(plantId){constrecords=this.wateringManager.getWateringRecordsForPlant(plantId);if(records.length===0)return0;consttotal=records.reduce((sum,r)=>sum+r.amount,0);returntotal/records.length;}getWateringFrequency(plantId,days=30){constrecords=this.wateringManager.getWateringRecordsForPlant(plantId);constcutoffDate=newDate();cutoffDate.setDate(cutoffDate.getDate()-days);constrecentRecords=records.filter(r=>newDate(r.date)>cutoffDate);return(recentRecords.length/days*7).toFixed(2);// 每周浇水次数}getWateringTrend(plantId,days=30){constrecords=this.wateringManager.getWateringRecordsForPlant(plantId);consttrend={};records.forEach(record=>{constdate=newDate(record.date).toLocaleDateString('zh-CN');trend[date]=(trend[date]||0)+record.amount;});returntrend;}}

这个WateringStatistics类提供了浇水的统计功能。getTotalWateringCount返回浇水总次数，getAverageWateringAmount计算平均浇水量，getWateringFrequency计算浇水频率，getWateringTrend返回浇水趋势数据。这些统计信息可以帮助用户了解浇水规律。

浇水提醒功能

functioncheckWateringReminders(){plants.forEach(plant=>{constlastWateringDate=wateringManager.getLastWateringDate(plant.id);constwateringInterval=plant.wateringInterval||7;// 默认7天if(!lastWateringDate){// 从未浇过水sendWateringReminder(plant.id,plant.name,'从未浇过水');return;}constdaysSinceWatering=Math.floor((newDate()-newDate(lastWateringDate))/(24*60*60*1000));if(daysSinceWatering>=wateringInterval){sendWateringReminder(plant.id,plant.name,`已${daysSinceWatering}天未浇水`);}});}functionsendWateringReminder(plantId,plantName,message){cordova.exec(function(result){console.log("提醒已发送");},function(error){console.error("提醒发送失败:",error);},"NotificationPlugin","sendReminder",[{title:`${plantName}需要浇水`,message:message,plantId:plantId,type:'watering'}]);}// 定期检查浇水提醒setInterval(checkWateringReminders,60*60*1000);// 每小时检查一次

这段代码实现了浇水提醒功能。checkWateringReminders函数检查所有植物，如果某个植物超过设定的浇水间隔，就发送提醒。通过NotificationPlugin，我们可以向用户发送系统通知。这个功能帮助用户不会忘记给植物浇水。

浇水记录导出

functionexportWateringRecords(plantId){constplant=plants.find(p=>p.id===plantId);constrecords=wateringManager.getWateringRecordsForPlant(plantId);constcsvContent=[['日期','浇水量(ml)','土壤湿度(%)','备注'],...records.map(r=>[r.date.toLocaleString('zh-CN'),r.amount,r.soilMoisture||'N/A',r.notes||''])].map(row=>row.join(',')).join('\n');cordova.exec(function(result){console.log("浇水记录已导出");},function(error){console.error("导出失败:",error);},"FilePlugin","exportData",[{filename:`${plant.name}_watering_records.csv`,content:csvContent}]);}