Cordova与OpenHarmony换盆记录管理-智慧文博士

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

换盆管理系统概述

换盆是植物生长过程中的重要环节，它为植物提供更多的生长空间和新鲜的土壤。在Cordova框架与OpenHarmony系统的结合下，我们需要实现一个完整的换盆记录系统，包括换盆记录的创建、查询、统计和提醒功能。这个系统需要记录换盆的详细信息，如盆的大小、土壤类型等。

换盆记录数据模型

classPotSize{constructor(id,name,diameter,volume){this.id=id;this.name=name;this.diameter=diameter;// 直径（厘米）this.volume=volume;// 容积（升）}}classSoilType{constructor(id,name,composition,ph){this.id=id;this.name=name;this.composition=composition;// 土壤成分this.ph=ph;// pH值}}classRepottingRecord{constructor(plantId,oldPotSize,newPotSize,soilType,notes){this.id='repot_'+Date.now();this.plantId=plantId;this.oldPotSize=oldPotSize;this.newPotSize=newPotSize;this.soilType=soilType;this.date=newDate();this.notes=notes;this.reason='';// 换盆原因}}classRepottingManager{constructor(){this.records=[];this.potSizes=[];this.soilTypes=[];this.initDefaultData();this.loadFromStorage();}initDefaultData(){this.potSizes=[newPotSize('pot_1','小盆',10,0.5),newPotSize('pot_2','中盆',15,1.5),newPotSize('pot_3','大盆',20,3),newPotSize('pot_4','特大盆',25,5)];this.soilTypes=[newSoilType('soil_1','通用土壤','泥炭土+珍珠岩+蛭石',6.5),newSoilType('soil_2','多肉土壤','沙土+珍珠岩+碎石',7),newSoilType('soil_3','兰花土壤','树皮+苔藓+珍珠岩',6),newSoilType('soil_4','酸性土壤','泥炭土+硫磺',5.5)];}addRepottingRecord(plantId,oldPotSize,newPotSize,soilType,notes){constrecord=newRepottingRecord(plantId,oldPotSize,newPotSize,soilType,notes);this.records.push(record);this.saveToStorage();returnrecord;}}

这个换盆记录数据模型定义了PotSize、SoilType、RepottingRecord和RepottingManager类。PotSize类定义了盆的规格，SoilType类定义了土壤类型，RepottingRecord类记录每次换盆的详细信息。

与OpenHarmony数据库的集成

functionsaveRepottingRecordToDatabase(record){cordova.exec(function(result){console.log("换盆记录已保存到数据库");},function(error){console.error("保存失败:",error);},"DatabasePlugin","saveRepottingRecord",[{id:record.id,plantId:record.plantId,oldPotSize:record.oldPotSize,newPotSize:record.newPotSize,soilType:record.soilType,date:record.date.toISOString(),notes:record.notes,reason:record.reason}]);}functionloadRepottingRecordsFromDatabase(){cordova.exec(function(result){console.log("换盆记录已从数据库加载");repottingManager.records=result.map(rec=>{constrecord=newRepottingRecord(rec.plantId,rec.oldPotSize,rec.newPotSize,rec.soilType,rec.notes);record.id=rec.id;record.date=newDate(rec.date);record.reason=rec.reason;returnrecord;});renderRepottingRecords();},function(error){console.error("加载失败:",error);},"DatabasePlugin","loadRepottingRecords",[]);}

这段代码展示了如何与OpenHarmony的数据库进行交互。saveRepottingRecordToDatabase函数将换盆记录保存到数据库，loadRepottingRecordsFromDatabase函数从数据库加载所有换盆记录。

换盆记录列表展示

functionrenderRepottingRecords(plantId){constplant=plants.find(p=>p.id===plantId);if(!plant)return;constrecords=repottingManager.records.filter(r=>r.plantId===plantId).sort((a,b)=>newDate(b.date)-newDate(a.date));constcontainer=document.getElementById('page-container');container.innerHTML=`<div class="repotting-records-container"> <h2>${plant.name}的换盆记录</h2> <button class="add-record-btn" onclick="showAddRepottingRecordDialog('${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=>{constoldPot=repottingManager.potSizes.find(p=>p.id===record.oldPotSize);constnewPot=repottingManager.potSizes.find(p=>p.id===record.newPotSize);constsoil=repottingManager.soilTypes.find(s=>s.id===record.soilType);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="pot-change">🪴${oldPot?.name||'未知'}→${newPot?.name||'未知'}</p> <p class="pot-size">盆径:${oldPot?.diameter}cm →${newPot?.diameter}cm</p> <p class="soil-type">土壤:${soil?.name||'未知'}</p> <p class="soil-ph">pH值:${soil?.ph||'N/A'}</p>${record.reason?`<p class="repotting-reason">原因:${record.reason}</p>`:''}${record.notes?`<p class="record-notes">备注:${record.notes}</p>`:''}</div> <div class="record-actions"> <button onclick="editRepottingRecord('${record.id}')">编辑</button> <button onclick="deleteRepottingRecord('${record.id}')">删除</button> </div>`;recordsList.appendChild(recordItem);});container.appendChild(recordsList);}

这个函数负责渲染换盆记录列表。它显示了特定植物的所有换盆记录，包括日期、盆的变化、土壤类型和pH值。用户可以通过"编辑"和"删除"按钮管理记录。

添加换盆记录对话框

functionshowAddRepottingRecordDialog(plantId){constdialog=document.createElement('div');dialog.className='modal-dialog';letpotOptions='';repottingManager.potSizes.forEach(pot=>{potOptions+=`<option value="${pot.id}">${pot.name}(${pot.diameter}cm)</option>`;});letsoilOptions='';repottingManager.soilTypes.forEach(soil=>{soilOptions+=`<option value="${soil.id}">${soil.name}(pH${soil.ph})</option>`;});dialog.innerHTML=`<div class="modal-content"> <h3>添加换盆记录</h3> <form id="add-repotting-form"> <div class="form-group"> <label>原盆大小</label> <select id="old-pot-size" required> <option value="">请选择原盆大小</option>${potOptions}</select> </div> <div class="form-group"> <label>新盆大小</label> <select id="new-pot-size" required> <option value="">请选择新盆大小</option>${potOptions}</select> </div> <div class="form-group"> <label>土壤类型</label> <select id="soil-type" required> <option value="">请选择土壤类型</option>${soilOptions}</select> </div> <div class="form-group"> <label>换盆原因</label> <select id="repotting-reason"> <option value="">请选择原因</option> <option value="根系拥挤">根系拥挤</option> <option value="土壤老化">土壤老化</option> <option value="植物生长">植物生长</option> <option value="病害防治">病害防治</option> </select> </div> <div class="form-group"> <label>换盆日期</label> <input type="datetime-local" id="repotting-date" required> </div> <div class="form-group"> <label>备注</label> <textarea id="repotting-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('repotting-date').value=now.toISOString().slice(0,16);document.getElementById('add-repotting-form').addEventListener('submit',function(e){e.preventDefault();constoldPotSize=document.getElementById('old-pot-size').value;constnewPotSize=document.getElementById('new-pot-size').value;constsoilType=document.getElementById('soil-type').value;constreason=document.getElementById('repotting-reason').value;constdate=newDate(document.getElementById('repotting-date').value);constnotes=document.getElementById('repotting-notes').value;constrecord=newRepottingRecord(plantId,oldPotSize,newPotSize,soilType,notes);record.date=date;record.reason=reason;repottingManager.records.push(record);repottingManager.saveToStorage();saveRepottingRecordToDatabase(record);closeDialog();renderRepottingRecords(plantId);showToast('换盆记录已添加');});}

这个函数创建并显示添加换盆记录的对话框。用户可以选择原盆大小、新盆大小、土壤类型、换盆原因和日期。提交后，新记录会被添加到repottingManager中。

换盆统计功能

classRepottingStatistics{constructor(repottingManager){this.repottingManager=repottingManager;}getTotalRepottingCount(plantId){returnthis.repottingManager.records.filter(r=>r.plantId===plantId).length;}getLastRepottingDate(plantId){constrecords=this.repottingManager.records.filter(r=>r.plantId===plantId).sort((a,b)=>newDate(b.date)-newDate(a.date));returnrecords.length>0?records[0].date:null;}getRepottingInterval(plantId){constrecords=this.repottingManager.records.filter(r=>r.plantId===plantId).sort((a,b)=>newDate(a.date)-newDate(b.date));if(records.length<2)returnnull;constintervals=[];for(leti=1;i<records.length;i++){constinterval=Math.floor((newDate(records[i].date)-newDate(records[i-1].date))/(24*60*60*1000));intervals.push(interval);}returnMath.round(intervals.reduce((a,b)=>a+b)/intervals.length);}getMostUsedSoilType(plantId){constrecords=this.repottingManager.records.filter(r=>r.plantId===plantId);constsoilCounts={};records.forEach(record=>{soilCounts[record.soilType]=(soilCounts[record.soilType]||0)+1;});constmostUsed=Object.keys(soilCounts).reduce((a,b)=>soilCounts[a]>soilCounts[b]?a:b);returnthis.repottingManager.soilTypes.find(s=>s.id===mostUsed);}}

这个RepottingStatistics类提供了换盆的统计功能。getTotalRepottingCount返回换盆总次数，getLastRepottingDate返回最后一次换盆的日期，getRepottingInterval计算平均换盆间隔，getMostUsedSoilType返回最常用的土壤类型。

换盆提醒功能

functioncheckRepottingReminders(){plants.forEach(plant=>{constlastRepottingDate=getLastRepottingDate(plant.id);constrepottingInterval=plant.repottingInterval||365;// 默认1年if(!lastRepottingDate){sendRepottingReminder(plant.id,plant.name,'从未换过盆');return;}constdaysSinceRepotting=Math.floor((newDate()-newDate(lastRepottingDate))/(24*60*60*1000));if(daysSinceRepotting>=repottingInterval){sendRepottingReminder(plant.id,plant.name,`已${daysSinceRepotting}天未换盆`);}});}functionsendRepottingReminder(plantId,plantName,message){cordova.exec(function(result){console.log("换盆提醒已发送");},function(error){console.error("提醒发送失败:",error);},"NotificationPlugin","sendReminder",[{title:`${plantName}需要换盆`,message:message,plantId:plantId,type:'repotting'}]);}functiongetLastRepottingDate(plantId){constrecords=repottingManager.records.filter(r=>r.plantId===plantId).sort((a,b)=>newDate(b.date)-newDate(a.date));returnrecords.length>0?records[0].date:null;}setInterval(checkRepottingReminders,60*60*1000);// 每小时检查一次