vue3 可视化数据大屏 智慧农业综合监控平台

如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870

id

221

运行环境

nodejs 18

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:智慧农业综合监控平台 可视化数据大屏 vue3

动态效果

效果截图

农作物分布

展示各类农作物的种植分布情况

土壤监测数据

通过雷达图展示土壤湿度、温度、养分含量等指标

风险预警信息

实时显示各类农业生产风险预警

关键数据

关键数据卡片展示 总耕地面积 农作物种类 土地利用率 智能设备

农田地理分布

基于百度地图展示农田地理位置分布

作物产量预测

对比分析去年产量与预测产量

实时监控

农田实时监控视频展示

作物生长状态

展示不同农作物的生长阶段和预计收获时间

水资源消耗监控

水资源消耗监控：监控农业用水情况，包括当前用水量、计划用水量等

实时监控

实时监控弹窗展示视频

更多可视化大屏实例

大屏数据可视化模板

更多背景图资源

数据大屏背景图

项目文件目录

部分代码

<template>
  <div class="home">
    <top name="智慧农业综合监控平台"></top>
    <div class="homemain">
      <div class="homemainl">
        <div class="item1">
          <item :duration="0.5" :delay="0" name="农作物分布">
            <item1></item1>
          </item>
        </div>
        <div class="item1">
          <item :duration="0.5" :delay="0.5" name="土壤监测数据">
            <item2></item2>
          </item>
        </div>
        <div class="item1">
          <item :duration="0.5" :delay="1" name="风险预警信息">
            <item3></item3>
          </item>
        </div>
      </div>
      <div class="homemainc">
        <div class="item0">
          <item7></item7>
        </div>
        <div class="item1" ref="item8Container">
          <item8></item8>
        </div>
        <div class="item2">
          <item :duration="0.5" :delay="1" name="作物产量预测">
            <item9></item9>
          </item>
        </div>
      </div>
      <div class="homemainr">
        <div class="item1">
          <item :duration="0.5" :delay="0" name="实时监控">
            <item4></item4>
          </item>
        </div>
        <div class="item1">
          <item :duration="0.5" :delay="0.5" name="作物生长状态">
            <item5></item5>
          </item>
        </div>
        <div class="item1">
          <item :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 item9 from "./components/item9/index.vue";
import WOW from "wow.js";
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>

项目依赖

{
  "name": "zhihuinongye",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build-qiniu": "vite build && node ./qiniu.js",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vue/shared": "^3.2.47",
    "@meruem117/vue-seamless-scroll": "^0.1.8",
    "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",
    "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"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

源码下载

项目基于vue3+vite+js开发 nodejs 16，购买代码请确保有相关开发基础

纯前端大屏，无后端。

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