Web/daimp-front
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
daimp-front/sub-operation-service/src/views/smartFarm/index.vue

700 lines
27 KiB
Vue
Raw Normal View History

修改头部和菜单导航栏，添加部分路由。
2025-05-15 17:34:49 +08:00
<template>
<section>
<common>
<template #main>
<div>
农业环境监测修改
2025-05-20 09:48:38 +08:00
<el-card shadow="hover" style="border-radius: 16px">
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
<el-row>
<el-col :span="10">
模拟数据变动
2025-05-21 14:31:53 +08:00
<map-comp style="height: 300px; width: 100%; border: 0" @change-map="changeMap"></map-comp>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="13">
<div class="location">
模拟数据变动
2025-05-21 14:31:53 +08:00
耿马县·{{ currentPosition
}}<img :src="getAssetsFile('images/smartFarm/location.png')" height="20" style="margin-left: 8px" alt="" />
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</div>
<div style="display: flex; justify-content: space-around">
<el-card v-for="(item, index) in weatherData" :key="index" :body-style="{ padding: 0 }" shadow="always" class="weatherCards">
<div>{{ item.time }}</div>
<div><img :src="getAssetsFile('images/smartFarm/' + item.weather + '.png')" alt="" height="50" /></div>
<div>{{ item.temp }}℃</div>
</el-card>
</div>
<div class="details">
<div class="details-block">
<div class="detail">
<div class="leftTitle">温度</div>
周末修改
2025-06-09 10:59:28 +08:00
<div class="rightValue">{{ currentData.temp }}℃</div>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</div>
<div class="detail">
<div class="leftTitle">PM2.5</div>
<div class="rightValue">{{ currentData.PM2 }}μg/m³</div>
</div>
<div class="detail">
周末修改
2025-06-09 10:59:28 +08:00
<div class="leftTitle">光照度</div>
<div class="rightValue">{{ currentData.light }}Lux</div>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</div>
周末修改
2025-06-09 10:59:28 +08:00
<!-- <div class="detail">-->
<!-- <div class="leftTitle">作物虫害</div>-->
<!-- <div class="rightValue">-->
<!-- {{ currentData.bugs === 0 ? '无' : '有' }}-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="detail">-->
<!-- <div class="leftTitle">土壤温度</div>-->
<!-- <div class="rightValue">{{ currentData.dustTemp }}℃</div>-->
<!-- </div>-->
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</div>
<div class="details-block">
<div class="detail">
<div class="leftTitle">湿度</div>
<div class="rightValue">{{ currentData.wet }}%</div>
</div>
<div class="detail">
<div class="leftTitle">PM10</div>
<div class="rightValue">{{ currentData.temp }}μg/m³</div>
</div>
周末修改
2025-06-09 10:59:28 +08:00
<div class="detail">&nbsp;</div>
<!-- <div class="detail">-->
<!-- <div class="leftTitle">作物病害</div>-->
<!-- <div class="rightValue">-->
<!-- {{ currentData.sick === 0 ? '无' : '有' }}-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="detail">-->
<!-- <div class="leftTitle">土壤湿度</div>-->
<!-- <div class="rightValue">{{ currentData.dustWet }}%</div>-->
<!-- </div>-->
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</div>
<div class="details-block">
<div class="detail">
<div class="leftTitle">风向</div>
<div class="rightValue">
{{ currentData.wind }}
</div>
</div>
<div class="detail">
<div class="leftTitle">风速</div>
<div class="rightValue">{{ currentData.temp }}m/s</div>
</div>
周末修改
2025-06-09 10:59:28 +08:00
<div class="detail">&nbsp;</div>
<!-- <div class="detail">-->
<!-- <div class="leftTitle">土壤酸碱度</div>-->
<!-- <div class="rightValue">-->
<!-- {{ currentData.PH }}-->
<!-- </div>-->
<!-- </div>-->
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</div>
</div>
</el-col>
</el-row>
</el-card>
农业环境监测修改
2025-05-20 09:48:38 +08:00
<el-card shadow="hover" style="margin-top: 10px; border-radius: 16px">
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
<div style="display: flex; padding: 20px">
<div style="width: 30%">
周末修改
2025-06-09 10:59:28 +08:00
<div style="font-size: 18px; font-weight: bold; text-align: left">土壤监测数据</div>
<!-- <div style="display: flex">-->
<!-- <div class="dustData">-->
<!-- <div>-->
<!-- <img :src="getAssetsFile('images/smartFarm/光照传感器.png')" alt="" />-->
<!-- 光照-->
<!-- </div>-->
<!-- <div class="values">{{ dustData.light }}</div>-->
<!-- </div>-->
<!-- <div class="dustData">-->
<!-- <div>-->
<!-- <img :src="getAssetsFile('images/smartFarm/排风.png')" alt="" />-->
<!-- 排风-->
<!-- </div>-->
<!-- <div class="values">{{ dustData.wind }}</div>-->
<!-- </div>-->
<!-- <div class="dustData">-->
<!-- <div>-->
<!-- <img :src="getAssetsFile('images/smartFarm/蒸腾.png')" alt="" />-->
<!-- 蒸腾-->
<!-- </div>-->
<!-- <div class="values">{{ dustData.evapotranspiration }}</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div style="display: flex">-->
<!-- <div class="dustData">-->
<!-- <div>-->
<!-- <img :src="getAssetsFile('images/smartFarm/土壤湿度.png')" alt="" />-->
<!-- 湿度-->
<!-- </div>-->
<!-- <div class="values">{{ dustData.wet.min }}</div>-->
<!-- <div class="values">{{ dustData.wet.max }}</div>-->
<!-- </div>-->
<!-- <div class="dustData">-->
<!-- <div>-->
<!-- <img :src="getAssetsFile('images/smartFarm/土壤温度.png')" alt="" />-->
<!-- 温度-->
<!-- </div>-->
<!-- <div class="values">{{ dustData.temp.min }}</div>-->
<!-- <div class="values">{{ dustData.temp.max }}</div>-->
<!-- </div>-->
<!-- <div class="dustData">-->
<!-- <div>-->
<!-- <img :src="getAssetsFile('images/smartFarm/空气.png')" alt="" />-->
<!-- 空气-->
<!-- </div>-->
<!-- <div class="values">{{ dustData.air.dirt }}</div>-->
<!-- <div class="values">{{ dustData.air.wet }}</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="report">-->
<!-- <div><img :src="getAssetsFile('images/smartFarm/bell.png')" alt="" /></div>-->
<!-- <div class="warning">-->
<!-- <div>温度</div>-->
<!-- <div>36℃</div>-->
<!-- </div>-->
<!-- <div class="warning">-->
<!-- <div>超高</div>-->
<!-- <div>4℃</div>-->
<!-- </div>-->
<!-- </div>-->
<div class="dustData">
<div style="width: 24%; display: flex; flex-direction: column; justify-content: space-between">
<div>土壤深度</div>
<div style="position: relative">-10cm<img :src="getAssetsFile('images/smartFarm/deep.png')" class="deepIcon" alt="" /></div>
<div style="position: relative">-20cm<img :src="getAssetsFile('images/smartFarm/deep.png')" class="deepIcon" alt="" /></div>
<div style="position: relative">-30cm<img :src="getAssetsFile('images/smartFarm/deep.png')" class="deepIcon" alt="" /></div>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</div>
周末修改
2025-06-09 10:59:28 +08:00
<div style="width: 24%; display: flex; flex-direction: column; justify-content: space-between">
<div>土壤水分</div>
<div>62%</div>
<div>55%</div>
<div>53%</div>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</div>
周末修改
2025-06-09 10:59:28 +08:00
<div style="width: 24%; display: flex; flex-direction: column; justify-content: space-between">
<div>土壤温度</div>
<div>22.5℃</div>
<div>18.3℃</div>
<div>15.7℃</div>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</div>
周末修改
2025-06-09 10:59:28 +08:00
<div style="width: 24%; display: flex; flex-direction: column; justify-content: space-between">
<div>PH值</div>
<div>6.5</div>
<div>6.2</div>
<div>6.1</div>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</div>
</div>
<div class="report">
<div><img :src="getAssetsFile('images/smartFarm/bell.png')" alt="" /></div>
<div class="warning">
周末修改
2025-06-09 10:59:28 +08:00
<div>土壤水分偏低，需要灌溉</div>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</div>
</div>
</div>
<div style="width: 35%">
模拟数据变动
2025-05-21 14:31:53 +08:00
<map-simple style="height: 320px; width: 100%" @change-map2="changeMap2"></map-simple>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</div>
<div style="width: 35%">
<div style="margin-top: 70px; display: flex; text-align: left">
<el-col :span="12">
周末修改
2025-06-09 10:59:28 +08:00
<el-row class="dataTitle">泵压管控Mpa</el-row>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
<el-row>
<el-col :span="12">
<span style="font-size: 15px">输入</span>
模拟数据变动
2025-05-21 14:31:53 +08:00
<span class="values">{{ dustData.pressure.input }}</span>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</el-col>
<el-col :span="12">
<span style="font-size: 15px">末端</span>
模拟数据变动
2025-05-21 14:31:53 +08:00
<span class="values">{{ dustData.pressure.end }}</span>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</el-col>
</el-row>
</el-col>
<el-col :span="12">
周末修改
2025-06-09 10:59:28 +08:00
<el-row class="dataTitle">水泵实时流量m³/h</el-row>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
<el-row>
<el-col :span="12">
模拟数据变动
2025-05-21 14:31:53 +08:00
<span class="values">{{ dustData.flow.output }}</span>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</el-col>
</el-row>
</el-col>
</div>
周末修改
2025-06-09 10:59:28 +08:00
<!-- <div style="display: flex; text-align: left">-->
<!-- <el-col :span="12">-->
<!-- <el-row class="dataTitle">水肥监测</el-row>-->
<!-- <el-row>-->
<!-- <el-col :span="12">-->
<!-- <span style="font-size: 15px">PH</span>-->
<!-- <span class="values">{{ dustData.fertilization.ph }}</span>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <span style="font-size: 15px">输入</span>-->
<!-- <span class="values">{{ dustData.fertilization.output }}</span>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-col>-->
<!-- <el-col :span="12">&nbsp;</el-col>-->
<!-- </div>-->
<el-row class="dataTitle" style="margin-top: 55px">月灌溉量m³</el-row>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
<charts-flow style="height: 150px; width: 100%"></charts-flow>
</div>
</div>
</el-card>
农业环境监测修改
2025-05-20 09:48:38 +08:00
<el-card shadow="hover" style="margin-top: 10px; border-radius: 16px">
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
<div style="display: flex; padding: 20px">
<div style="width: 50%">
周末修改
2025-06-09 10:59:28 +08:00
<div style="font-size: 18px; font-weight: bold; text-align: left">产能预测数据</div>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
<div style="display: flex; justify-content: flex-start; margin: 20px 0">
<div class="plansBlock" style="background-color: #25bf82">
<div style="">预计生产</div>
<div style="font-weight: 900">300吨</div>
</div>
<div class="plansBlock" style="background-color: #ffbe4d; margin-left: 5%">
<div>预计产值</div>
<div style="font-weight: 900">1500万元</div>
</div>
</div>
<div class="coins">
<div style="width: 28%">
<div style="text-align: left; font-size: 14px; color: #999999">水质综合评分</div>
<div style="display: flex; justify-content: space-between; margin-top: 5px">
<div style="display: flex; align-items: center; font-size: 20px">
<div class="shu" style="background-color: #3685fe"></div>
<div style="margin-left: 5px">87</div>
</div>
<div style="line-height: 30px">
<img :src="getAssetsFile('images/smartFarm/fall.png')" alt="" style="width: 25px; height: 25px" />
</div>
</div>
</div>
<div style="width: 28%">
<div style="text-align: left; font-size: 14px; color: #999999">病虫害管控评分</div>
<div style="display: flex; justify-content: space-between; margin-top: 5px">
<div style="display: flex; align-items: center; font-size: 20px">
<div class="shu" style="background-color: #25bf82"></div>
<div style="margin-left: 5px">87</div>
</div>
<div style="line-height: 30px">
<img :src="getAssetsFile('images/smartFarm/rise.png')" alt="" style="width: 25px; height: 25px" />
</div>
</div>
</div>
<div style="width: 28%">
<div style="text-align: left; font-size: 14px; color: #999999">环境综合评分</div>
<div style="display: flex; justify-content: space-between; margin-top: 5px">
<div style="display: flex; align-items: center; font-size: 20px">
<div class="shu" style="background-color: #ffd500"></div>
<div style="margin-left: 5px">87</div>
</div>
<div style="line-height: 30px">
<img :src="getAssetsFile('images/smartFarm/rise.png')" alt="" style="width: 25px; height: 25px" />
</div>
</div>
</div>
</div>
<div class="vars">
<div style="display: flex; justify-content: space-between; width: 45%">
<div style="color: #999999">种植面积</div>
<div style="color: #25bf82; font-weight: 900">500亩</div>
</div>
<div style="display: flex; justify-content: space-between; width: 45%">
<div style="color: #999999">水质监测</div>
<div style="color: #25bf82; font-weight: 900">1266次</div>
</div>
</div>
<div class="vars">
<div style="display: flex; justify-content: space-between; width: 45%">
<div style="color: #999999">病虫害监测</div>
<div style="color: #25bf82; font-weight: 900">367次</div>
</div>
<div style="display: flex; justify-content: space-between; width: 45%">
<div style="color: #999999">环境监测</div>
<div style="color: #25bf82; font-weight: 900">1547次</div>
</div>
</div>
</div>
<div style="width: 50%">
模拟农资交易部分数据
2025-05-27 11:58:55 +08:00
<img style="width: 100%" :src="getAssetsFile('images/smartFarm/locationPic.png')" alt="" />
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
</div>
</div>
</el-card>
修改头部和菜单导航栏，添加部分路由。
2025-05-15 17:34:49 +08:00
</div>
</template>
</common>
</section>
</template>
<script setup>
模拟数据变动
2025-05-21 14:31:53 +08:00
import { ref } from 'vue';
修改头部和菜单导航栏，添加部分路由。
2025-05-15 17:34:49 +08:00
import Common from './components/common.vue';
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
import MapComp from '@/views/smartFarm/components/mapComp.vue';
import { getAssetsFile } from '@/utils/index.js';
import MapSimple from '@/views/smartFarm/components/mapSimple.vue';
import ChartsFlow from '@/views/smartFarm/components/charts-flow.vue';
模拟数据变动
2025-05-21 14:31:53 +08:00
import Mock from 'mockjs';
修改头部和菜单导航栏，添加部分路由。
2025-05-15 17:34:49 +08:00
/* --------------- data --------------- */
// #region
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
const weatherData = ref([
{
weather: 'sunny',
time: '15:00',
temp: '18',
},
{
weather: 'sunnyToCloudy',
time: '16:00',
temp: '19',
},
{
weather: 'thunderRain',
time: '17:00',
temp: '19',
},
{
weather: 'rainy',
time: '18:00',
temp: '18',
},
{
weather: 'rainy',
time: '19:00',
temp: '15',
},
{
weather: 'windy',
time: '20:00',
temp: '13',
},
]);
修改头部和菜单导航栏，添加部分路由。
2025-05-15 17:34:49 +08:00
模拟数据变动
2025-05-21 14:31:53 +08:00
const dustData = ref({
light: '2000Lux', // 光照强度
wind: '15m³/h', // 排风量
evapotranspiration: '2000Lux', // 蒸腾
wet: {
min: '26%',
max: '34%',
},
temp: {
min: '32℃',
max: '28℃',
},
air: {
dirt: '300ppm',
wet: '34%',
},
pressure: {
周末修改
2025-06-09 10:59:28 +08:00
input: '0.6',
end: 0.3,
模拟数据变动
2025-05-21 14:31:53 +08:00
},
flow: {
temp: '53',
input: '125',
周末修改
2025-06-09 10:59:28 +08:00
output: '180.3',
模拟数据变动
2025-05-21 14:31:53 +08:00
},
fertilization: {
ph: 8,
output: '18',
},
});
// 定义合法的天气状态流转规则
const weatherStates = [
{
type: 'sunny',
next: ['sunny', 'sunnyToCloudy'], // 晴天只能转晴天或晴转多云
tempEffect: +0, // 温度影响
},
{
type: 'sunnyToCloudy',
next: ['thunderRain', 'rainy'], // 晴转多云后可能转雷雨或直接下雨
tempEffect: +1,
},
{
type: 'thunderRain',
next: ['rainy', 'windy'], // 雷雨后继续下雨或转大风
tempEffect: -2,
},
{
type: 'rainy',
next: ['rainy', 'windy'], // 雨天可能持续或转大风
tempEffect: -3,
},
{
type: 'windy',
next: ['sunny'], // 大风后转晴天
tempEffect: -4,
},
];
const currentPosition = ref('孟定镇');
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
const currentData = ref({
temp: 18, // 当前温度
PM2: 80, // 空气质量 μg/m³
bugs: 0, // 虫害
dustTemp: 15, // 土壤温度 ℃
wet: 56, // 湿度 %
PM10: 120, // 空气质量 μg/m³
sick: 0, // 病害
dustWet: 64, // 土壤湿度%
wind: '东南风', // 风向
light: 500, // 光照Lux
windSpeed: 1.5, // 风速 m/s
PH: 6.5, // 土壤酸碱度
});
模拟数据变动
2025-05-21 14:31:53 +08:00
// 基础环境数据模板
修改头部和菜单导航栏，添加部分路由。
2025-05-15 17:34:49 +08:00
// #endregion
/* --------------- methods --------------- */
// #region
模拟数据变动
2025-05-21 14:31:53 +08:00
const changeMap = (params) => {
currentPosition.value = params.message;
const newWeatherData = generateSmartWeather(15, 6, 18);
weatherData.value = newWeatherData;
currentData.value = generateFarmData(18);
};
const changeMap2 = (params) => {
console.log(params.message);
dustData.value = Mock.mock({
// 光照强度 (500-3000 Lux)
light: '@natural(500, 3000)' + 'Lux',
// 排风量 (5-30 m³/h)
wind: '@natural(5, 30)' + 'm³/h',
// 蒸腾量 (1-10 mm/day)
evapotranspiration: '@natural(1, 10)' + 'mm/day',
// 湿度范围 (min:20-40%, max比min高5-15%)
wet: {
min: '@natural(20, 40)' + '%',
max: function () {
return parseInt(this.min) + Mock.mock('@natural(5, 15)') + '%';
},
},
// 温度范围 (min:15-25℃, max比min高5-15℃)
temp: {
min: '@natural(15, 25)' + '℃',
max: function () {
return parseInt(this.min) + Mock.mock('@natural(5, 15)') + '℃';
},
},
// 空气质量
air: {
// 颗粒物浓度 (100-800 ppm)
dirt: '@natural(100, 800)' + 'ppm',
wet: '@natural(30, 60)%', // 先独立生成
},
// 压力参数
pressure: {
// 输入压力 (5-15 MPa)
周末修改
2025-06-09 10:59:28 +08:00
input: '@natural(0.2, 0.8)',
模拟数据变动
2025-05-21 14:31:53 +08:00
// 末端压力衰减 (1-5)
周末修改
2025-06-09 10:59:28 +08:00
end: '@natural(0.2, 0.8)',
模拟数据变动
2025-05-21 14:31:53 +08:00
},
// 流量参数
flow: {
// 流体温度 (30-60 m²/h)
temp: '@natural(30, 60)',
// 输入流量 (50-200 m²/h)
input: '@natural(50, 200)',
周末修改
2025-06-09 10:59:28 +08:00
output: '@natural(175, 185)',
模拟数据变动
2025-05-21 14:31:53 +08:00
},
// 施肥参数
fertilization: {
// pH值 (5.0-8.5)
ph: '@float(5, 8.5, 1, 1)',
// 输出流量 (10-50 m²/h)
output: '@natural(10, 50)',
},
});
};
// 生成智能天气数据
function generateSmartWeather(startTime, hours, baseTemp = 18) {
let currentWeather = 'sunny';
const result = [];
for (let i = 0; i < hours; i++) {
// 1. 获取当前天气状态对象
const state = weatherStates.find((s) => s.type === currentWeather);
// 2. 计算时间 (15:00 格式)
const time = `${startTime + i}:00`.padStart(5, '0');
// 3. 计算温度（基于基础温度+天气影响+随机波动）
const temp = baseTemp + state.tempEffect + Math.floor(Math.random() * 2);
// 4. 记录数据
result.push({
weather: currentWeather,
time,
temp: Math.max(temp, -5), // 确保不低于-5度
});
// 5. 智能切换下一个天气状态
currentWeather = state.next[Math.floor(Math.random() * state.next.length)];
}
return result;
}
const generateFarmData = (baseTemp = 18) => {
// 1. 先生成核心天气数据（基于之前方案）
const weather = Mock.mock({
weather: '@pick(["sunny", "sunnyToCloudy", "thunderRain", "rainy", "windy"])',
wind: '@pick(["东南风", "西南风", "东北风", "西北风"])',
windSpeed: '@float(0.5, 5, 1, 1)',
});
// 2. 根据天气计算衍生数据
const weatherImpact = {
sunny: { temp: +0, light: +200, wet: -10 },
sunnyToCloudy: { temp: +1, light: -100, wet: +5 },
thunderRain: { temp: -2, light: -300, wet: +20 },
rainy: { temp: -3, light: -400, wet: +25 },
windy: { temp: -4, light: +50, wet: -15 },
}[weather.weather];
修改头部和菜单导航栏，添加部分路由。
2025-05-15 17:34:49 +08:00
模拟数据变动
2025-05-21 14:31:53 +08:00
// 3. 生成完整数据集（带科学关联）
return {
temp: Mock.Random.float(baseTemp + weatherImpact.temp - 1, baseTemp + weatherImpact.temp + 1, 1, 1),
PM2: Mock.Random.integer(weather.weather === 'windy' ? 30 : 60, weather.weather === 'rainy' ? 90 : 120),
PM10: Mock.Random.integer(80, 150),
bugs: Mock.Random.integer(0, weather.wet > 70 ? 5 : 2), // 高湿度虫害增加
dustTemp: Mock.Random.float(baseTemp - 3, baseTemp + 1, 1, 1),
wet: Mock.Random.integer(50 + weatherImpact.wet, 70 + weatherImpact.wet),
sick: Mock.Random.integer(0, weather.weather === 'thunderRain' ? 3 : 1), // 雷雨易引发病害
dustWet: Mock.Random.integer(60, weather.weather === 'rainy' ? 85 : 75),
wind: weather.wind,
light: Mock.Random.integer(Math.max(200, 500 + weatherImpact.light), Math.min(1200, 800 + weatherImpact.light)),
windSpeed: weather.windSpeed,
PH: Mock.Random.float(6.0, 7.5, 1, 1),
};
};
修改头部和菜单导航栏，添加部分路由。
2025-05-15 17:34:49 +08:00
// #endregion
</script>
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
<style lang="scss" scoped>
.vars {
width: 95%;
margin: 15px 0;
display: flex;
justify-content: space-between;
font-size: 14px;
}
.shu {
width: 4px;
height: 30px;
border-radius: 2px;
}
.coins {
display: flex;
width: 95%;
height: 60px;
justify-content: space-between;
}
.plansBlock {
height: 90px;
width: 45%;
border-radius: 16px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
padding: 10px 20px;
color: #ffffff;
font-size: 16px;
}
.values {
color: #25bf82;
font-size: 15px;
margin-left: 5px;
}
.dataTitle {
margin: 4px 0;
color: #999999;
}
.warning {
周末修改
2025-06-09 10:59:28 +08:00
font-size: 14px;
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
div {
margin: 4px 0;
}
}
.report {
height: 70px;
width: 100%;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-around;
background: linear-gradient(to left, #ffc9d4 0%, #ffffff 100% /* 底部稍深青色 */);
img {
height: 40px;
}
}
.dustData {
周末修改
2025-06-09 10:59:28 +08:00
width: 100%;
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
display: flex;
周末修改
2025-06-09 10:59:28 +08:00
justify-content: space-around;
font-size: 14px;
height: 250px;
padding: 30px 0;
}
.deepIcon {
width: 30px;
position: absolute;
left: -20px;
top: -2px;
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
}
.details {
display: flex;
justify-content: space-around;
.details-block {
width: 29%;
display: flex;
flex-direction: column;
周末修改
2025-06-09 10:59:28 +08:00
justify-content: space-between;
智慧种植页面首页 田间监测页面
2025-05-19 13:38:34 +08:00
}
.detail {
display: flex;
justify-content: space-between;
padding: 8px 0;
.leftTitle {
font-size: 15px;
color: #999999;
}
.rightValue {
font-size: 15px;
color: #25bf82;
}
}
}
.location {
padding: 20px 0;
text-align: right;
font-size: 15px;
color: #000000;
}
.weatherCards {
display: flex;
flex-direction: column;
justify-content: space-around;
font-size: 15px;
color: #999999;
text-align: center;
height: 120px;
width: 70px;
background: linear-gradient(to left bottom, #cfffec 0%, /* 顶部浅青色 */ #fbfefd 70%, /* 中间渐变色 */ #ffffff 100% /* 底部稍深青色 */);
border-radius: 12px;
border: none;
box-shadow: 0 4px 12px rgba(0, 150, 136, 0.15);
}
</style>
Reference in New Issue Copy Permalink