首页 > 分享 > Vue2 实战：开发农业生产管理系统中的作物监控与生产统计页面》《前端开发教程：用 Vue2 打造农业管理系统，含产量分析与病虫害预警》《Vue2 项目实战：构建农业种植管理系统，实现作物生长监控

Vue2 实战：开发农业生产管理系统中的作物监控与生产统计页面》《前端开发教程：用 Vue2 打造农业管理系统，含产量分析与病虫害预警》《Vue2 项目实战：构建农业种植管理系统，实现作物生长监控

花匠小妙招
2024-11-15 10:25

效果图

在这里插入图片描述

【定制化开发服务，让您的项目领先一步】

如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com

完整代码

一个 农业生产管理系统的作物生长监控与生产统计页面。该页面帮助农业企业管理和监控农田作物的生长情况、生产产量、气候数据、土地状态和病虫害预警。页面结构复杂，包含作物总览、田地状态监控、产量分析、气候数据记录、病虫害预警等模块，适用于大型农场或农业公司的生产管理。

功能页面：农业生产管理系统 - 作物生长监控与生产统计页面 功能描述：

此页面帮助农业管理团队实时监控作物生长情况，分析土地使用情况、气候数据、产量情况等，并在病虫害发生时提供预警。页面结构包含作物总览、田地实时状态、气候数据监控、产量统计、病虫害预警和土地资源管理，支持管理人员全方位管理农业生产的多个环节。

页面结构： 作物总览：展示农田总面积、种植作物总数、成熟作物面积、待收割作物数量等信息。田地筛选与状态监控：支持按作物类型、田块位置、种植状态等筛选田块，实时监控每块田地的种植情况。作物产量分析：通过图表展示不同作物的产量分布和总产量，支持按季度、年度筛选分析。气候数据记录与趋势分析：展示每日气候数据（温度、降水、湿度等），帮助管理者了解气候对作物的影响。病虫害预警：展示各田块的病虫害情况，包括病害类型、受影响面积、控制进展等，支持及时预警。土地资源管理：展示土地使用情况，包括已种植面积、可用面积、休耕田块，支持资源优化。数据导出与生产报表：支持导出 Excel 或 PDF 格式的农业生产报表，便于记录和长远分析。完整代码示例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>农业生产管理系统 - 作物生长监控与生产统计</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <style> body { font-family: Arial, sans-serif; background-color: #f3f5f8; margin: 0; padding: 20px; } .container { max-width: 1400px; width: 100%; background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .header { font-size: 24px; font-weight: bold; text-align: center; color: #333; margin-bottom: 20px; } .overview { display: flex; gap: 20px; margin-bottom: 30px; } .overview-card { flex: 1; padding: 15px; background-color: #e7f9f0; border-radius: 8px; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .overview-card h3 { font-size: 16px; color: #888; } .overview-card .value { font-size: 24px; color: #333; font-weight: bold; } .filter-bar { display: flex; gap: 10px; margin-bottom: 15px; } .filter-bar select, .filter-bar input { padding: 5px; border: 1px solid #ddd; border-radius: 5px; } .content { display: flex; gap: 20px; margin-top: 20px; } .field-list { flex: 2; } .table-container { background-color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .table-container table { width: 100%; border-collapse: collapse; margin-top: 10px; } .table-container th, .table-container td { padding: 10px; border: 1px solid #ddd; text-align: center; } .table-container th { background-color: #f1f1f1; color: #333; font-weight: bold; } .field-details { flex: 2; background-color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .details-header { font-size: 18px; font-weight: bold; color: #333; margin-bottom: 10px; } .details-content { font-size: 16px; color: #555; margin-bottom: 5px; } .chart-container { display: flex; gap: 20px; margin-top: 20px; } .chart-box { flex: 1; height: 300px; background-color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .alert-container { background-color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-top: 20px; } .alert-item { padding: 10px 0; border-bottom: 1px solid #ddd; color: #ff0000; font-weight: bold; } </style> </head> <body> <div id="app" class="container">  <div class="header">农业生产管理系统 - 作物生长监控与生产统计</div>  <div class="overview"> <div class="overview-card"> <h3>总农田面积</h3> <div class="value">{{ totalArea }} 亩</div> </div> <div class="overview-card"> <h3>种植作物数</h3> <div class="value">{{ totalCrops }}</div> </div> <div class="overview-card"> <h3>成熟作物面积</h3> <div class="value">{{ matureArea }} 亩</div> </div> <div class="overview-card"> <h3>待收割</h3> <div class="value">{{ pendingHarvest }}</div> </div> </div>  <div class="filter-bar"> <input type="text" placeholder="搜索田块..." v-model="searchQuery" /> <select v-model="selectedStatus"> <option value="">按种植状态筛选</option> <option value="种植中">种植中</option> <option value="成熟">成熟</option> <option value="待收割">待收割</option> </select> </div> <div class="content"> <div class="field-list"> <div class="table-container"> <table> <thead> <tr> <th>田块编号</th> <th>作物类型</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="field in filteredFields" :key="field.id"> <td>{{ field.id }}</td> <td>{{ field.crop }}</td> <td>{{ field.status }}</td> <td><button @click="viewField(field)">查看</button></td> </tr> </tbody> </table> </div> </div>  <div v-if="selectedField" class="field-details"> <div class="details-header">田块编号：{{ selectedField.id }} - 详情</div> <div class="details-content">作物类型：{{ selectedField.crop }}</div> <div class="details-content">状态：{{ selectedField.status }}</div> <div class="details-content">预计收割时间：{{ selectedField.harvestDate }}</div> <button @click="scheduleHarvest(selectedField)">安排收割</button> </div> </div>  <div class="chart-container"> <div class="chart-box" id="yieldChart">加载产量图...</div> <div class="chart-box" id="climateChart">加载气候数据图...</div> </div>  <div class="alert-container"> <div class="details-header">病虫害预警</div> <div class="alert-item" v-for="alert in pestAlerts" :key="alert.id"> {{ alert.crop }} - 受影响面积：{{ alert.area }} 亩 ({{ alert.diseaseType }}) </div> </div> </div> <script> new Vue({ el: '#app', data() { return { totalArea: 500, totalCrops: 20, matureArea: 150, pendingHarvest: 50, searchQuery: '', selectedStatus: '', fields: [ { id: 'F123', crop: '小麦', status: '种植中', harvestDate: '2024-11-30' }, { id: 'F124', crop: '玉米', status: '成熟', harvestDate: '2024-12-10' } ], selectedField: null, pestAlerts: [ { id: 1, crop: '水稻', area: 20, diseaseType: '虫害' }, { id: 2, crop: '玉米', area: 15, diseaseType: '霉病' } ] }; }, computed: { filteredFields() { return this.fields.filter(field => (!this.searchQuery || field.crop.includes(this.searchQuery)) && (!this.selectedStatus || field.status === this.selectedStatus) ); } }, methods: { viewField(field) { this.selectedField = field; }, scheduleHarvest(field) { alert(`安排收割：${field.crop}`); }, initCharts() { const yieldChart = echarts.init(document.getElementById('yieldChart')); yieldChart.setOption({ title: { text: '作物产量分析', left: 'center' }, xAxis: { type: 'category', data: ['小麦', '玉米', '水稻'] }, yAxis: { type: 'value' }, series: [{ name: '产量', data: [300, 250, 400], type: 'bar' }] }); const climateChart = echarts.init(document.getElementById('climateChart')); climateChart.setOption({ title: { text: '气候数据', left: 'center' }, xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月'] }, yAxis: { type: 'value' }, series: [ { name: '温度', data: [15, 18, 20, 25], type: 'line' }, { name: '降水量', data: [20, 25, 15, 30], type: 'line' } ] }); } }, mounted() { this.initCharts(); } }); </script> </body> </html> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 功能亮点： 作物总览：展示农田总面积、作物数、成熟面积等数据，帮助管理员掌握整体种植情况。田地筛选与监控：按作物种类或田地状态筛选田块，支持查看田地详情。产量与气候统计图表：通过图表分析作物产量和气候数据，便于生产管理和环境调控。病虫害预警：展示受病虫害影响的田地信息，支持实时预警和问题追踪。报表生成与导出：支持生成农业生产报表，便于长期数据分析和档案管理。