智慧农业数据可视化大屏可视化数据大屏 vue3

vue3 可视化数据大屏 智慧农业数据可视化大屏

id

258

运行环境

nodejs 16

开发框架

vue3 vite js

分辨率

1920 * 1080

动态效果

演示地址

演示demo:智慧农业数据可视化大屏可视化数据大屏 vue3

农场总览

左侧区域
农场基本信息：展示农场的核心数据，为管理者提供农场概况。
作物分布：通过图表直观展示农场内不同作物的分布情况，帮助管理者了解种植结构和布局。
土壤监测：实时显示土壤湿度、温度、pH值等关键指标，确保作物生长环境处于最佳状态。
农村地理分布地图标注关键信息位置
产量预测：基于历史数据和当前生长状况，通过算法模型预测未来产量，为生产规划和市场销售提供数据支持。
右侧区域
设备状态：监控农场内各类智能设备的运行状态。
环境监测：实时监测农场环境参数，如气温、湿度、光照等，为作物生长提供适宜环境参考。
水肥监测：追踪灌溉和施肥情况，优化水肥管理，提高资源利用效率。

作物监测

左侧区域
作物生长状态分布：直观展示农场内不同区域作物的生长状况，通过颜色或图表形式呈现，帮助管理者快速识别生长异常区域。
土壤湿度监测：实时监测并展示农田各区域的土壤湿度数据，为灌溉决策提供依据，避免水资源浪费或作物缺水。
病虫害预警：基于实时采集的数据和预测模型，对可能发生的病虫害进行预警，并提供防治建议，降低农作物损失风险。
右侧区域
环境监测数据：展示农场环境参数，包括气温、湿度、光照、二氧化碳浓度等，为作物生长环境评估提供数据支持。
作物长势排行：对比展示不同区域或不同品种作物的生长情况排名，帮助识别表现优异和需要关注的作物。
实时告警信息：显示系统检测到的异常情况和告警信息，如设备故障、环境异常、病虫害爆发等，确保问题能够及时发现和处理。

环境监测

农田分布与监测点：展示农田的地理分布情况和各监测点的位置，为管理者提供宏观视角的农场布局。
光照监测：实时显示农田各区域的光照强度数据，帮助优化作物种植布局和光照补充策略。
CO₂浓度监测：展示大气中二氧化碳浓度的实时数据，对温室种植环境进行精确控制。

当前天气状况：显示实时天气信息，包括温度、湿度、风向风速等，为农事活动安排提供参考。
温度监测：展示农田各区域的温度变化趋势，有助于及时调整温控措施。
水肥监测：实时监测灌溉和施肥情况，优化水肥管理，提高资源利用效率。

土壤监测：展示土壤湿度、pH值、养分含量等关键指标，确保作物生长环境处于最佳状态。
湿度监测：实时显示空气湿度数据，结合温度数据为作物生长环境调控提供依据。
告警信息：及时显示系统检测到的异常情况，如环境参数超标、设备故障等，确保问题能够快速发现和处理。

资源优化

资源利用概览：展示农场各类资源（水、肥、能源等）的总体利用情况和效率分析，帮助管理者快速了解资源利用现状。
资源消耗趋势：通过时间序列图表展示各类资源消耗的历史趋势和变化规律，为资源规划提供数据支持。
土壤营养监测：实时监测土壤中各类营养元素含量，评估土壤肥力状况，指导科学施肥，避免资源浪费。

核心数据展示：作为视觉焦点，中央区域可能展示农场整体布局、资源分布地图或关键绩效指标，提供宏观视角的资源管理信息。
右侧区域
灌溉系统状态：监控灌溉设备的运行状态、水资源使用情况和灌溉效率，确保水资源的合理利用。
资源优化指标：展示资源利用优化的关键指标，如水肥利用率、能源效率等，帮助评估优化措施的效果。
系统告警信息：及时显示资源异常使用、设备故障等告警信息，确保问题能够快速发现和处理。

智能设备

左侧区域
数据概览：展示农场核心运营数据，包括生产面积、作物种类、产量预测等关键指标，帮助管理者快速了解农场整体情况。
设备状态监控：实时监测农场内各类智能设备的运行状态，包括传感器、灌溉设备、自动化机械等，确保设备正常运行。
实时告警：显示系统检测到的异常情况和告警信息，如设备故障、环境参数异常等，便于及时发现和处理问题。
中央区域
核心数据展示：中央上方区域可能展示农场地理信息系统(GIS)地图或农田布局图，直观呈现农场空间分布。
设备运行状态：中央下方区域展示关键设备的状态信息，为设备管理提供深入数据。
右侧区域
作物生长监测：展示作物生长各阶段的关键数据，如生长速度、健康状况等，帮助管理者评估作物生长情况。
气象监测：实时显示农场气象数据，包括温度、湿度、光照、降水等，为农事活动安排提供参考。
视频监控：集成农场各区域的视频监控画面，实现对农场的远程实时监控，提高安全管理水平。

生产运营

左侧区域
生产概览：展示农场整体生产情况，包括种植面积、作物品种、产量总计等核心生产指标，帮助管理者快速了解生产全貌。
作物产量分析：通过图表形式展示不同作物的产量数据和对比分析，帮助识别高产作物和提升空间。
种植日历：显示全年种植计划和进度，包括播种、管理、收获等关键时间节点，便于合理安排农事活动。
中央区域
核心数据展示：中央上方区域可能展示农场地理分布或生产基地布局图，直观呈现农场空间规划。
每月成本分析：中央下方区域展示按月份划分的成本数据变化趋势，帮助管理者了解成本波动规律，优化资源配置。
右侧区域
资源使用情况：展示水、肥、农药、能源等各类资源的使用量和使用效率，为资源优化提供依据。
成本类型分析：通过饼图或柱状图等形式，分析不同类型成本（如人工、物料、设备等）的构成比例，识别成本控制重点。
市场趋势：展示农产品市场价格走势、需求变化等市场信息，为销售决策和种植规划提供参考。

市场销售

上部区域
销售概览：展示农产品销售的核心指标，如总销售额、销售量、同比增长等关键数据，帮助管理者快速了解销售全局情况。
销售趋势分析：通过时间序列图表展示销售数据的变化趋势，包括日、周、月、季度等多维度的销售走势，帮助识别销售规律和异常。
产品销售排行：展示各类农产品的销售排名，直观呈现热销产品和滞销产品，为产品结构调整提供依据。
下部区域
地域销售分布：左侧区域可能展示农产品销售的地域分布情况，通过地图形式直观呈现各区域销售情况，帮助制定区域营销策略。
产品类别分析：中上部区域展示不同类别农产品的销售构成和比例，帮助了解产品组合情况。
季节性销售分析：中下部区域分析农产品销售的季节性特征，识别销售旺季和淡季，为生产和营销规划提供参考。
客户分析：右上部区域展示客户构成、客户价值和客户忠诚度等信息，帮助了解客户特征和需求。
利润分析：右下部区域分析各类产品或各销售渠道的利润情况，识别高利润和低利润业务，优化经营策略。

质量追溯

左侧区域
农产品基本信息：展示农产品的品种、产地、种植面积、产量等基础信息，帮助管理者全面了解农产品基本情况。
农产品质量指标：通过图表形式展示农产品的各项质量指标数据，如农药残留、重金属含量、营养成分等，直观呈现产品质量状况。
农产品追溯次数：统计展示各类农产品被消费者或监管部门追溯查询的频次，反映市场对产品溯源信息的关注度。
中央区域
核心数据展示：中央上方区域可能展示农产品生产基地分布图或溯源系统整体架构图，提供宏观视角的系统概览。
农产品溯源链：中央下方区域展示农产品从种植、加工、物流到销售的完整溯源链条，直观呈现产品全生命周期的质量控制节点。
右侧区域
农产品质量等级分布：展示不同质量等级农产品的分布情况，帮助识别质量管理的优势和不足。
质量预警信息：实时显示质量检测中发现的异常情况和预警信息，确保问题能够及时发现和处理。
产品认证信息：展示农产品获得的各类认证情况，如有机认证、绿色食品认证、地理标志产品认证等，体现产品的市场竞争力。

示例代码

<template>
  <div class="home">
    <particles></particles>
    <top name="智慧农业数据可视化大屏"></top>
    <div class="homemain">
      <div class="homemainl">
        <div class="item1">
          <item :icon="icon1" :duration="0.5" :delay="0" name="农场基本信息">
            <item1></item1>
          </item>
        </div>
        <div class="item1">
          <item :icon="icon2" :duration="0.5" :delay="0.5" name="作物分布">
            <item2></item2>
          </item>
        </div>
        <div class="item1">
          <item :icon="icon3" :duration="0.5" :delay="1" name="土壤监测">
            <item3></item3>
          </item>
        </div>
      </div>
      <div class="homemainc">
        <div class="item1" ref="item8Container">
          <item7></item7>
        </div>
        <div class="item2">
          <item :icon="icon7" :duration="0.5" :type="1" :delay="1" name="产量预测">
            <item8></item8>
          </item>
        </div>
      </div>
      <div class="homemainr">
        <div class="item1">
          <item :icon="icon4" :duration="0.5" :delay="0" name="设备状态">
            <item4></item4>
          </item>
        </div>
        <div class="item1">
          <item :icon="icon5" :duration="0.5" :delay="0.5" name="环境监测">
            <item5></item5>
          </item>
        </div>
        <div class="item1">
          <item :icon="icon6" :duration="0.5" :delay="1" name="水肥监测">
            <item6></item6>
          </item>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import { gsap } from 'gsap';
import top from "@/components/top/index.vue";
import item from "@/components/item/index.vue";
import item3 from "./components/item3/index.vue";
import item1 from "./components/item1/index.vue";
import item2 from "./components/item2/index.vue";
import item4 from "./components/item4/index.vue";
import item5 from "./components/item5/index.vue";
import item6 from "./components/item6/index.vue";
import item7 from "./components/item7/index.vue";
import item8 from "./components/item8/index.vue";
import particles from "@/components/particles/index.vue";
import WOW from "wow.js";
import icon1 from './assets/icon1.png'
import icon2 from './assets/icon2.png'
import icon3 from './assets/icon3.png'
import icon4 from './assets/icon4.png'
import icon5 from './assets/icon5.png'
import icon6 from './assets/icon6.png'
import icon7 from './assets/icon7.png'
const item8Container = ref(null);
onMounted(() => {
  const wow = new WOW();
  wow.init();
  // 为item8添加从小到大的动画
  gsap.set(item8Container.value, { scale: 0, opacity: 0 });
  gsap.to(item8Container.value, {
    duration: 0.8,
    scale: 1,
    opacity: 1,
    ease: "back.out(1.7)",
    delay: 0.5
  });
});
</script>

项目依赖

"dependencies": {
    "@meruem117/vue-seamless-scroll": "^0.1.8",
    "@tsparticles/slim": "^3.8.1",
    "@tsparticles/vue3": "^3.0.1",
    "@vue/shared": "^3.2.47",
    "amfe-flexible": "^2.2.1",
    "animejs": "^3.2.1",
    "autoprefixer": "^10.4.13",
    "axios": "^1.3.4",
    "dayjs": "^1.11.7",
    "echarts": "^5.4.0",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "postcss-pxtorem": "^6.0.0",
    "qiniu": "^7.8.0",
    "relation-graph": "^2.2.11",
    "sass": "^1.57.1",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "vite-plugin-compression": "^0.5.1",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "vue3-seamless-scroll": "^2.0.1",
    "wow.js": "^1.2.2"
  },

项目结构

源码下载

项目基于vue3+vite+js开发 nodejs 18

购买代码前请确保具备相关开发基础

本项目为纯前端大屏，无后端支持

默认数据为模拟数据，实际使用时需接入真实数据源

虚拟产品一经售出概不退款请谅解

完竣世界 -关注前端分享心得