智能灌溉和智能浸种开发完成，含右侧展示组件，原文件结构调整，路由调整
This commit is contained in:
2090205686@qq.com
parent
f72e2a2f14
commit
9e193feb0e
BIN
sub-operation-service/src/assets/images/smartFarm/demo-list.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/demo-list.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@ -139,6 +139,18 @@ export const constantRoutes = [
|
||||
name: 'intelligentFertilizer',
|
||||
meta: { title: '智能配肥' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/smartFarm/IntelligentIrrigation',
|
||||
component: () => import('@/views/smartFarm/inspection/IntelligentIrrigation.vue'),
|
||||
name: 'IntelligentIrrigation',
|
||||
meta: { title: '智能灌溉' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/smartFarm/IntelligentSeedSoaking',
|
||||
component: () => import('@/views/smartFarm/inspection/IntelligentSeedSoaking.vue'),
|
||||
name: 'IntelligentSeedSoaking',
|
||||
meta: { title: '智能浸种' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/smartFarm/growSeedlings',
|
||||
component: () => import('@/views/smartFarm/manageControl/growSeedlings.vue'),
|
||||
|
||||
@ -0,0 +1,71 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: () => '',
|
||||
validator: (items) => {
|
||||
return items;
|
||||
},
|
||||
},
|
||||
showImage: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
imageList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card style="border-radius: 16px; min-height: 316px">
|
||||
<div class="my-card-title" style="">{{ title }}</div>
|
||||
<div v-for="(item, index) in data" :key="index" class="show-data-box">
|
||||
<div class="left-title">{{ item.title }}:</div>
|
||||
<div :style="{ color: item.status == '0' ? '#FE4066' : '#25BF82' }">{{ item.statusText }}</div>
|
||||
</div>
|
||||
<div v-if="showImage">
|
||||
<p style="font-size: 14px; text-align: left; color: #000000; margin-bottom: 10px">灌溉记录:</p>
|
||||
<el-image
|
||||
style="width: 100%"
|
||||
:src="imageList[0]"
|
||||
:zoom-rate="1.2"
|
||||
:max-scale="7"
|
||||
:min-scale="0.2"
|
||||
:preview-src-list="imageList"
|
||||
show-progress
|
||||
:initial-index="4"
|
||||
fit="cover"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
color: #000;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.show-data-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
margin: 7px 0;
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
@ -37,6 +37,8 @@ const icons = [
|
||||
{ 雨量计: 'rainGauge' },
|
||||
{ 土壤传感器: 'soilSensor' },
|
||||
{ 积水传感器: 'waterLoggingSensor' },
|
||||
{ 土壤温度: 'temperature' },
|
||||
{ 土壤湿度: 'humidity' },
|
||||
];
|
||||
|
||||
const props = defineProps({
|
||||
@ -44,19 +46,6 @@ const props = defineProps({
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
validator: (items) => {
|
||||
return items.every((item) => {
|
||||
return (
|
||||
typeof item === 'object' &&
|
||||
item !== null &&
|
||||
typeof item.id === 'number' &&
|
||||
typeof item.name === 'string' &&
|
||||
typeof item.detail === 'string' &&
|
||||
typeof item.icon === 'string' &&
|
||||
(!item.status || typeof item.status === 'number')
|
||||
);
|
||||
});
|
||||
},
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
@ -72,8 +61,8 @@ const props = defineProps({
|
||||
<template>
|
||||
<div>
|
||||
<el-card style="border-radius: 16px">
|
||||
<div style="font-size: 16px; font-weight: bold; text-align: left; color: #000">{{ title }}</div>
|
||||
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
|
||||
<div style="font-size: 16px; font-weight: bold; text-align: left; color: #000; margin-bottom: 20px">{{ title }}</div>
|
||||
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 20px">
|
||||
<div v-for="(item, index) in devices" :key="index" class="device">
|
||||
<div v-if="item.status == 1" class="status" style="background-color: #25bf82">正常</div>
|
||||
<div v-else-if="item.status == 0" class="status" style="background-color: #999999">离线</div>
|
||||
@ -109,6 +98,8 @@ const props = defineProps({
|
||||
<img v-else-if="item.icon === 'rainGauge'" :src="getAssetsFile('images/smartFarm/雨量计.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'soilSensor'" :src="getAssetsFile('images/smartFarm/土壤传感器.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'waterLoggingSensor'" :src="getAssetsFile('images/smartFarm/积水传感器.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'temperature'" :src="getAssetsFile('images/smartFarm/土壤温度.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'humidity'" :src="getAssetsFile('images/smartFarm/土壤湿度.png')" alt="" />
|
||||
<div style="text-align: left; font-weight: bold; font-size: 18px">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -120,9 +111,8 @@ const props = defineProps({
|
||||
<style scoped lang="scss">
|
||||
.device {
|
||||
height: 100px;
|
||||
width: 14%;
|
||||
width: 14.6%;
|
||||
background-color: #f5f5f5;
|
||||
margin: 20px 1%;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
@ -85,6 +85,18 @@ const leftMenu = reactive([
|
||||
icon: 'menu1.png',
|
||||
path: '/sub-operation-service/smartFarm/intelligentFertilizer',
|
||||
},
|
||||
{
|
||||
name: 'IntelligentIrrigation',
|
||||
title: '智能灌溉',
|
||||
icon: 'menu1.png',
|
||||
path: '/sub-operation-service/smartFarm/IntelligentIrrigation',
|
||||
},
|
||||
{
|
||||
name: 'IntelligentSeedSoaking',
|
||||
title: '智能浸种',
|
||||
icon: 'menu1.png',
|
||||
path: '/sub-operation-service/smartFarm/IntelligentSeedSoaking',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -179,7 +191,7 @@ const openList = (index) => {
|
||||
color: $color-main;
|
||||
}
|
||||
.smartFarm-left-menu-warp {
|
||||
padding: 0 30px;
|
||||
padding: 0 30px 0 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.left-menu {
|
||||
|
||||
@ -10,21 +10,6 @@ const props = defineProps({
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
validator: (items) => {
|
||||
return items.every((item) => {
|
||||
return (
|
||||
typeof item === 'object' &&
|
||||
item !== null &&
|
||||
typeof item.id === 'number' &&
|
||||
typeof item.isOpen === 'number' &&
|
||||
typeof item.isOperation === 'number' &&
|
||||
typeof item.name === 'string' &&
|
||||
typeof item.serial === 'string' &&
|
||||
typeof item.icon === 'string' &&
|
||||
(!item.status || typeof item.status === 'number')
|
||||
);
|
||||
});
|
||||
},
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
|
||||
@ -27,19 +27,6 @@ const props = defineProps({
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
validator: (items) => {
|
||||
return items.every((item) => {
|
||||
return (
|
||||
typeof item === 'object' &&
|
||||
item !== null &&
|
||||
typeof item.id === 'number' &&
|
||||
typeof item.name === 'string' &&
|
||||
typeof item.icon === 'string' &&
|
||||
typeof item.detail === 'string' &&
|
||||
(!item.status || typeof item.status === 'number')
|
||||
);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<div>
|
||||
<devices :title="'智能灌溉设备'" :devices="devices"></devices>
|
||||
</div>
|
||||
<div style="display: flex; align-items: stretch; justify-content: space-between; margin-top: 20px">
|
||||
<stream :title="'灌溉监测实时监控'" :devices="devices" style="width: 60%; margin-right: 20px; height: fit-content"></stream>
|
||||
<DataDisplay :title="'灌溉分析'" :data="rightData" :show-image="true" :image-list="srcList" style="flex: 1"></DataDisplay>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import Common from '../components/common.vue';
|
||||
import Devices from '@/views/smartFarm/components/devices.vue';
|
||||
import Stream from '@/views/smartFarm/components/stream.vue';
|
||||
import DataDisplay from '@/views/smartFarm/components/dataDisplay.vue';
|
||||
|
||||
const devices = ref([
|
||||
{
|
||||
name: 'A-001',
|
||||
icon: 'temperature',
|
||||
detail: 'A区-监控设备9',
|
||||
status: '1', // 0: 离线 1: 正常 -1: 异常
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-002',
|
||||
icon: 'temperature',
|
||||
detail: 'A区-监控设备66',
|
||||
status: '1',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-003',
|
||||
icon: 'humidity',
|
||||
detail: 'A区-监控设备7',
|
||||
status: '0',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'A-004',
|
||||
icon: 'humidity',
|
||||
detail: 'A区-监控设备1',
|
||||
status: '-1',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
name: 'A-005',
|
||||
icon: 'valve',
|
||||
detail: 'A区-监控设备5',
|
||||
status: '-1',
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
name: 'A-006',
|
||||
icon: 'valve',
|
||||
status: '0',
|
||||
detail: 'A区-监控设备21',
|
||||
id: 5,
|
||||
},
|
||||
{
|
||||
name: 'A-007',
|
||||
icon: 'sprinkler',
|
||||
status: '0',
|
||||
detail: 'A区-监控设备4',
|
||||
id: 6,
|
||||
},
|
||||
{
|
||||
name: 'A-008',
|
||||
detail: 'A区-监控设备3',
|
||||
icon: 'sprinkler',
|
||||
status: '-1',
|
||||
id: 7,
|
||||
},
|
||||
{
|
||||
name: 'A-009',
|
||||
detail: 'A区-监控设备9',
|
||||
icon: 'waterSupplyValve',
|
||||
status: '-1',
|
||||
id: 8,
|
||||
},
|
||||
{
|
||||
name: 'A-010',
|
||||
detail: 'A区-监控设备10',
|
||||
icon: 'waterSupplyValve',
|
||||
status: '0',
|
||||
id: 9,
|
||||
},
|
||||
{
|
||||
name: 'A-011',
|
||||
detail: 'A区-监控设备3',
|
||||
icon: 'intelligentValveControl',
|
||||
status: '1',
|
||||
id: 10,
|
||||
},
|
||||
{
|
||||
name: 'A-012',
|
||||
detail: 'A区-监控设备3',
|
||||
icon: 'intelligentValveControl',
|
||||
status: '1',
|
||||
id: 11,
|
||||
},
|
||||
]);
|
||||
|
||||
const srcList = ref(['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']);
|
||||
const rightData = ref([
|
||||
{
|
||||
title: '土壤温度', //左侧文本
|
||||
status: '1', // 0:不正常 1:正常
|
||||
statusText: '正常', //右侧文本
|
||||
},
|
||||
{
|
||||
title: '土壤养分含量',
|
||||
status: '1',
|
||||
statusText: '正常',
|
||||
},
|
||||
{
|
||||
title: '光照强度',
|
||||
status: '0',
|
||||
statusText: '偏高',
|
||||
},
|
||||
{
|
||||
title: '降水量',
|
||||
status: '0',
|
||||
statusText: '偏低',
|
||||
},
|
||||
{
|
||||
title: '空气湿度',
|
||||
status: '1',
|
||||
statusText: '正常',
|
||||
},
|
||||
{
|
||||
title: '风速',
|
||||
status: '1',
|
||||
statusText: '微风',
|
||||
},
|
||||
{
|
||||
title: '设备状态',
|
||||
status: '1',
|
||||
statusText: '正常',
|
||||
},
|
||||
{
|
||||
title: '用水储备',
|
||||
status: '1',
|
||||
statusText: '充足',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<div>
|
||||
<devices :title="'智能浸种设备'" :devices="devices"></devices>
|
||||
</div>
|
||||
<div style="display: flex; align-items: stretch; justify-content: space-between; margin-top: 20px">
|
||||
<stream :title="'浸种监测实时监控'" :devices="devices" style="width: 60%; margin-right: 20px; height: fit-content"></stream>
|
||||
<DataDisplay :title="'浸种分析'" :data="rightData" :show-image="true" :image-list="srcList" style="flex: 1"></DataDisplay>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import Common from '../components/common.vue';
|
||||
import Devices from '@/views/smartFarm/components/devices.vue';
|
||||
import Stream from '@/views/smartFarm/components/stream.vue';
|
||||
import DataDisplay from '@/views/smartFarm/components/dataDisplay.vue';
|
||||
|
||||
const devices = ref([
|
||||
{
|
||||
name: 'A-001',
|
||||
icon: 'tempSensor',
|
||||
detail: 'A区-监控设备9',
|
||||
status: '1', // 0: 离线 1: 正常 -1: 异常
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-002',
|
||||
icon: 'tempSensor',
|
||||
detail: 'A区-监控设备66',
|
||||
status: '1',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-003',
|
||||
icon: 'heater',
|
||||
detail: 'A区-监控设备7',
|
||||
status: '1',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'A-004',
|
||||
icon: 'heater',
|
||||
detail: 'A区-监控设备1',
|
||||
status: '-1',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
name: 'A-005',
|
||||
icon: 'heat',
|
||||
detail: 'A区-监控设备5',
|
||||
status: '1',
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
name: 'A-006',
|
||||
icon: 'disinfectionLamp',
|
||||
status: '0',
|
||||
detail: 'A区-监控设备21',
|
||||
id: 5,
|
||||
},
|
||||
{
|
||||
name: 'A-007',
|
||||
icon: 'timer',
|
||||
status: '1',
|
||||
detail: 'A区-监控设备4',
|
||||
id: 6,
|
||||
},
|
||||
{
|
||||
name: 'A-008',
|
||||
detail: 'A区-监控设备3',
|
||||
icon: 'timer',
|
||||
status: '-1',
|
||||
id: 7,
|
||||
},
|
||||
{
|
||||
name: 'A-009',
|
||||
detail: 'A区-监控设备9',
|
||||
icon: 'mixer',
|
||||
status: '1',
|
||||
id: 8,
|
||||
},
|
||||
{
|
||||
name: 'A-010',
|
||||
detail: 'A区-监控设备10',
|
||||
icon: 'liquidSensor',
|
||||
status: '1',
|
||||
id: 9,
|
||||
},
|
||||
{
|
||||
name: 'A-011',
|
||||
detail: 'A区-监控设备3',
|
||||
icon: 'liquidSensor',
|
||||
status: '0',
|
||||
id: 10,
|
||||
},
|
||||
{
|
||||
name: 'A-012',
|
||||
detail: 'A区-监控设备3',
|
||||
icon: 'disinfectionLamp',
|
||||
status: '1',
|
||||
id: 11,
|
||||
},
|
||||
]);
|
||||
|
||||
const srcList = ref(['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']);
|
||||
const rightData = ref([
|
||||
{
|
||||
title: '温度', //左侧文本
|
||||
status: '1', // 0:不正常 1:正常
|
||||
statusText: '21℃ 正常', //左侧文本
|
||||
},
|
||||
{
|
||||
title: '湿度',
|
||||
status: '1',
|
||||
statusText: '18℃ 正常',
|
||||
},
|
||||
{
|
||||
title: '光照强度',
|
||||
status: '1',
|
||||
statusText: '正常',
|
||||
},
|
||||
{
|
||||
title: '浸泡液位',
|
||||
status: '1',
|
||||
statusText: '正常',
|
||||
},
|
||||
{
|
||||
title: '溶解氧含量',
|
||||
status: '1',
|
||||
statusText: '36% 正常',
|
||||
},
|
||||
{
|
||||
title: '酸碱度',
|
||||
status: '1',
|
||||
statusText: '6.7 正常',
|
||||
},
|
||||
{
|
||||
title: '设备状态',
|
||||
status: '1',
|
||||
statusText: '正常',
|
||||
},
|
||||
{
|
||||
title: '种子状态',
|
||||
status: '1',
|
||||
statusText: '出芽',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -7,7 +7,7 @@
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; margin-top: 10px">
|
||||
<stream :title="'施肥监测实时监控'" :devices="devices" style="width: 60%; height: fit-content"></stream>
|
||||
<el-card style="width: calc(40% - 20px); border-radius: 16px; padding: 10px">
|
||||
<el-card style="width: calc(40% - 20px); border-radius: 16px">
|
||||
<div style="font-size: 16px; font-weight: bold; text-align: left">配肥分析</div>
|
||||
<div class="plantStatus">
|
||||
<div class="leftKey">土壤酸碱度:</div>
|
||||
|
||||
@ -36,6 +36,7 @@ export default defineConfig(({ command, mode }) => {
|
||||
port: VITE_PORT,
|
||||
open: true,
|
||||
https: false,
|
||||
origin: 'http://localhost:9526',
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user