This commit is contained in:
姚俊旭 2025-05-21 10:16:49 +08:00
commit 15637ac3ee
25 changed files with 8348 additions and 10620 deletions

View File

@ -61,7 +61,7 @@ export const rightApps = [
// entry: VITE_APP_SUB_GSS, // entry: VITE_APP_SUB_GSS,
entry: VITE_APP_SUB_GSR, entry: VITE_APP_SUB_GSR,
// activeRule: '/sub-government-screen-service', // activeRule: '/sub-government-screen-service',
activeRule: '/new-digital-agriculture-screen/v2/land', activeRule: '/new-digital-agriculture-screen',
title: '数据大屏', title: '数据大屏',
icon: 'images/platform/icon-screen.png', icon: 'images/platform/icon-screen.png',
}, },

View File

@ -35,9 +35,8 @@ import { leftApps, rightApps } from '@/micro/app';
import { getAssetsFile } from '@/utils'; import { getAssetsFile } from '@/utils';
const gotoPage = (row) => { const gotoPage = (row) => {
console.log(row); // window.history.pushState({}, row.name, row.activeRule);
console.log(window.history.pushState({}, row.name, row.activeRule)); window.location.href = row.activeRule;
window.history.pushState({}, row.name, row.activeRule);
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

File diff suppressed because it is too large Load Diff

View File

@ -17,6 +17,70 @@ export const constantRoutes = [
component: () => import('@/views/error/403.vue'), component: () => import('@/views/error/403.vue'),
hidden: true, hidden: true,
}, },
{
path: '/new-digital-agriculture-screen',
name: 'home',
component: Layout,
redirect: '/new-digital-agriculture-screen/v2/land', //原home
meta: { title: '首页', icon: '' },
children: [
// {
// path: '/new-digital-agriculture-screen/v2/home',
// component: () => import('@/views/home/index.vue'),
// name: 'home',
// meta: { title: '首页', icon: '' },
// },
{
path: '/new-digital-agriculture-screen/v2/land',
component: () => import('@/views/land/index.vue'),
name: 'land',
meta: { title: '土地资源', icon: '' },
},
{
path: '/new-digital-agriculture-screen/v2/inputs',
name: 'inputs',
component: () => import('@/views/inputs/index.vue'),
meta: { title: '投入品监管', icon: '' },
},
{
path: '/new-digital-agriculture-screen/v2/entities',
name: 'entities',
component: () => import('@/views/entities/index.vue'),
meta: { title: '产出品管理', icon: '' },
},
// {
// path: 'breed',
// name: 'breed',
// component: () => import('@/views/breed/index.vue'),
// meta: { title: '', icon: '' },
// },
// {
// path: 'plant',
// name: 'plant',
// component: () => import('@/views/plant/index.vue'),
// meta: { title: '', icon: '' },
// },
{
path: '/new-digital-agriculture-screen/v2/business',
name: 'business',
component: () => import('@/views/business/index.vue'),
meta: { title: '生产经营主体', icon: '' },
},
{
path: '/new-digital-agriculture-screen/v2/trace',
name: 'trace',
component: () => import('@/views/trace/index.vue'),
meta: { title: '农产品溯源', icon: '' },
},
// {
// path: 'early',
// name: 'early',
// component: () => import('@/views/early/index.vue'),
// meta: { title: '', icon: '' },
// },
],
},
// { // {
// // 原来的首页默认配置 // // 原来的首页默认配置
// path: '/new-digital-agriculture-screen', // path: '/new-digital-agriculture-screen',
@ -34,7 +98,7 @@ export const constantRoutes = [
// ], // ],
// }, // },
// ...demoRouters, // ...demoRouters,
v2, // v2,
// { // {
// path: '/test', // path: '/test',
// name: 'test', // name: 'test',

Binary file not shown.

After

Width:  |  Height:  |  Size: 601 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 601 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 623 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 608 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -145,6 +145,30 @@ export const constantRoutes = [
name: 'growSeedlings', name: 'growSeedlings',
meta: { title: '一体育苗' }, meta: { title: '一体育苗' },
}, },
{
path: '/sub-operation-service/smartFarm/pestPrevention',
component: () => import('@/views/smartFarm/pestPrevention/index.vue'),
name: 'pestPrevention',
meta: { title: '病虫害防治' },
},
{
path: '/sub-operation-service/smartFarm/irrigationSystem',
component: () => import('@/views/smartFarm/irrigationSystem/index.vue'),
name: 'irrigationSystem',
meta: { title: '喷灌滴灌' },
},
{
path: '/sub-operation-service/smartFarm/drainageControl',
component: () => import('@/views/smartFarm/drainageControl/index.vue'),
name: 'drainageControl',
meta: { title: '排集水控制' },
},
{
path: '/sub-operation-service/smartFarm/openCurtain',
component: () => import('@/views/smartFarm/openCurtain/index.vue'),
name: 'openCurtain',
meta: { title: '开窗卷帘' },
},
], ],
}, },
{ {

View File

@ -1,3 +1,6 @@
<template>
<dev></dev>
</template>
<!-- <template> <!-- <template>
<div class="data-home-index"> <div class="data-home-index">
<el-row style="width: 100%; height: 100%"> <el-row style="width: 100%; height: 100%">

View File

@ -60,6 +60,30 @@ const menus = reactive([
icon: 'menu3.png', icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/growSeedlings', path: '/sub-operation-service/smartFarm/growSeedlings',
}, },
{
name: 'control',
title: '病虫害预防',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/pestPrevention',
},
{
name: 'control',
title: '喷灌滴灌',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/irrigationSystem',
},
{
name: 'control',
title: '排集水控制',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/drainageControl',
},
{
name: 'control',
title: '开窗卷帘',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/openCurtain',
},
], ],
}, },
]); ]);

View File

@ -0,0 +1,148 @@
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const props = defineProps({
devices: {
type: Array,
required: true,
default: () => [],
},
isShowBroadcast: {
type: Boolean,
default: false,
},
broadcastData: {
type: Array,
required: true,
default: () => [],
},
});
const getDeviceSwitchIsOpen = (device) => {
return computed({
get: () => device.isOpen !== 0,
set: (value) => {
device.isOpen = value ? 1 : 0;
},
});
};
const getDeviceSwitchStatus = (device) => {
return computed({
get: () => device.status == '0',
set: (value) => {
device.status = value;
},
});
};
const broadcast = ref([
'2025年01月01日10:10:10,排水泵P567789456发生异常关机,请检查设备情况!',
'2025年02月02日11:14:55,排水泵P567789478发生异常故障,请检查设备情况!',
]);
onMounted(() => {
console.info('broadcastData', props.broadcastData);
});
</script>
<template>
<div>
<el-card style="border-radius: 16px">
<div v-if="isShowBroadcast" class="broadcast-box">
<img :src="getAssetsFile('images/smartFarm/broadcast.png')" alt="" />
<div style="flex: 1">
<el-carousel height="32px" direction="vertical" motion-blur :autoplay="true">
<el-carousel-item v-for="(item, index) in broadcast" :key="index" style="line-height: 36px; font-size: 16px">
<div text="2xl" justify="center">{{ item }}</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
<div v-for="(item, index) in devices" :key="index" class="device-list-box">
<div class="device-list-title" style="">{{ item.title }}</div>
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 16px">
<div v-for="(device, i) in item.devices" :key="i" class="device">
<div v-if="device.status == 1" class="status" style="background-color: #25bf82">正常</div>
<div v-else-if="device.status == 0" class="status" style="background-color: #999999">离线</div>
<div v-else-if="device.status == -1" class="status" style="background-color: #fe4066">故障</div>
<div style="display: flex; flex-direction: column; justify-content: flex-start; height: 100%">
<div style="display: flex; justify-content: flex-start">
<img v-if="device.icon === 'pump'" :src="getAssetsFile('images/smartFarm/排水泵.png')" alt="" />
<img v-else-if="device.icon === 'gate'" :src="getAssetsFile('images/smartFarm/电动闸阀.png')" alt="" />
<img v-else-if="device.icon === 'sensor'" :src="getAssetsFile('images/smartFarm/液位传感器.png')" alt="" />
<div style="margin-left: 10px">
<div style="font-size: 16px; text-align: left; color: #000000">{{ device.name }}</div>
</div>
</div>
<div style="font-size: 12px; padding-left: 6px; margin: 10px 0; text-align: left">{{ device.serial }}</div>
<div style="padding-left: 6px; text-align: left">
<el-switch
v-model="getDeviceSwitchIsOpen(device).value"
:disabled="getDeviceSwitchStatus(device).value"
class="ml-2"
style="--el-switch-on-color: #25bf82; --el-switch-off-color: #999999"
/>
</div>
</div>
</div>
</div>
</div>
</el-card>
</div>
</template>
<style scoped lang="scss">
.broadcast-box {
height: 32px;
display: flex;
text-align: left;
margin-bottom: 20px;
img {
width: 115px;
}
}
.device-list-box {
margin-bottom: 20px;
}
.device-list-box:last-child {
margin-bottom: 0;
}
.device-list-title {
font-size: 16px;
font-weight: bold;
text-align: left;
color: #000;
margin-bottom: 20px;
}
.device {
height: 140px;
flex: 0 0 calc(25% - 20px);
background-color: #f5f5f5;
border-radius: 16px;
position: relative;
cursor: pointer;
padding: 16px 16px 16px 10px;
img {
height: 40px;
width: 40px;
}
}
.status {
border-radius: 0 16px 0 16px;
height: 32px;
line-height: 26px;
width: 40px;
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 12px;
}
</style>

View File

@ -91,7 +91,7 @@ const leftMenu = reactive([
name: 'control', name: 'control',
title: '生产管理控制', title: '生产管理控制',
icon: 'menu3.png', icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/main', path: '',
isOpen: false, isOpen: false,
children: [ children: [
{ {
@ -100,6 +100,30 @@ const leftMenu = reactive([
icon: 'menu3.png', icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/growSeedlings', path: '/sub-operation-service/smartFarm/growSeedlings',
}, },
{
name: 'control',
title: '病虫害预防',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/pestPrevention',
},
{
name: 'control',
title: '喷灌滴灌',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/irrigationSystem',
},
{
name: 'control',
title: '排集水控制',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/drainageControl',
},
{
name: 'control',
title: '开窗卷帘',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/openCurtain',
},
], ],
}, },
]); ]);

View File

@ -52,7 +52,7 @@ const props = defineProps({
<img v-else-if="item.icon === 'gogga'" :src="getAssetsFile('images/smartFarm/病虫害.png')" alt="" /> <img v-else-if="item.icon === 'gogga'" :src="getAssetsFile('images/smartFarm/病虫害.png')" alt="" />
<img v-else-if="item.icon === 'water'" :src="getAssetsFile('images/smartFarm/灌溉控制.png')" alt="" /> <img v-else-if="item.icon === 'water'" :src="getAssetsFile('images/smartFarm/灌溉控制.png')" alt="" />
<div style="margin-left: 10px"> <div style="margin-left: 10px">
<div style="font-size: 16px; text-align: left">{{ item.name }}</div> <div style="font-size: 16px; text-align: left; color: #000000">{{ item.name }}</div>
<div style="font-size: 12px; text-align: left">{{ item.serial }}</div> <div style="font-size: 12px; text-align: left">{{ item.serial }}</div>
</div> </div>
</div> </div>

View File

@ -0,0 +1,214 @@
<template>
<section>
<common>
<template #main>
<ControlDevices :devices="devices" :is-show-broadcast="true" :broadcast-data="broadcastData"></ControlDevices>
</template>
</common>
</section>
</template>
<script setup>
import { ref } from 'vue';
import { getAssetsFile } from '@/utils';
import Common from '../components/common.vue';
import ControlDevices from '@/views/smartFarm/components/controlDevices.vue';
const devices = ref([
{
title: '排水泵站',
devices: [
{
name: 'A-001',
serial: 'YM20250101001', //
icon: 'pump', // pump gate sensor
isOpen: 1, // 0: 1:
isOperation: 0, // 0: 1:
status: '1', // -1: 0:线 1:
id: 0,
},
{
name: 'A-002',
serial: 'YM20250101002',
icon: 'pump',
isOpen: 0,
isOperation: 1,
status: '1',
id: 1,
},
{
name: 'A-003',
serial: 'YM20250101003',
icon: 'pump',
isOpen: 0,
isOperation: 0,
status: '-1',
id: 2,
},
{
name: 'A-004',
serial: 'YM20250101004',
icon: 'pump',
isOpen: 1,
isOperation: 0,
status: '0',
id: 3,
},
],
},
{
title: '电动闸门',
devices: [
{
name: 'A-001',
serial: 'YM20250101001', //
icon: 'gate', // pump gate sensor
isOpen: 1, // 0: 1:
isOperation: 0, // 0: 1:
status: '1', // -1: 0:线 1:
id: 0,
},
{
name: 'A-002',
serial: 'YM20250101002',
icon: 'gate',
isOpen: 0,
isOperation: 1,
status: '1',
id: 1,
},
{
name: 'A-003',
serial: 'YM20250101003',
icon: 'gate',
isOpen: 0,
isOperation: 0,
status: '-1',
id: 2,
},
{
name: 'A-004',
serial: 'YM20250101004',
icon: 'gate',
isOpen: 1,
isOperation: 0,
status: '0',
id: 3,
},
],
},
{
title: '水位传感器',
devices: [
{
name: 'A-001',
serial: 'YM20250101001', //
icon: 'sensor', // pump gate sensor
isOpen: 1, // 0: 1:
isOperation: 0, // 0: 1:
status: '1', // -1: 0:线 1:
id: 0,
},
{
name: 'A-002',
serial: 'YM20250101002',
icon: 'sensor',
isOpen: 0,
isOperation: 1,
status: '1',
id: 1,
},
{
name: 'A-003',
serial: 'YM20250101003',
icon: 'sensor',
isOpen: 0,
isOperation: 0,
status: '-1',
id: 2,
},
{
name: 'A-004',
serial: 'YM20250101004',
icon: 'sensor',
isOpen: 1,
isOperation: 0,
status: '0',
id: 3,
},
],
},
]);
const tableData = ref([
{
name: '温度',
value: '>25',
device: '制冷机',
behavior: '开启',
time: 10,
},
{
name: '湿度',
value: '<24',
device: '喷洒机',
behavior: '关闭',
time: 15,
},
{
name: 'PH值',
value: '>8',
device: '配肥机',
behavior: '开启',
time: 5,
},
{
name: '风速',
value: '>中风',
device: '通风窗',
behavior: '关闭',
time: '/',
},
{
name: '光照',
value: '>强光',
device: '幕布',
behavior: '开启',
time: '/',
},
]);
const tableTitle = ref([
{
label: '参数名称',
prop: 'name',
width: 'auto',
},
{
label: '参数值',
prop: 'value',
width: 'auto',
},
{
label: '智能设备',
prop: 'device',
width: 'auto',
},
{
label: '机械行为',
prop: 'behavior',
width: 'auto',
},
{
label: '持续时间(min)',
prop: 'time',
width: 'auto',
},
]);
const broadcastData = ref([
'2025年01月01日10:10:10,排水泵P567789456发生异常关机,请检查设备情况!',
'2025年02月02日11:14:55,排水泵P567789478发生异常故障,请检查设备情况!',
]);
</script>
<style lang="scss" scoped></style>

View File

@ -188,17 +188,4 @@ const rightTableTitle = ref([
]); ]);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
.plantStatus {
display: flex;
justify-content: space-between;
font-size: 14px;
margin: 7px 0;
.leftKey {
color: #000000;
}
.rightValue {
color: #25bf82;
}
}
</style>

View File

@ -1,227 +1,7 @@
<script setup> <script setup></script>
import Devices from '@/views/smartFarm/components/devices.vue';
import Common from '@/views/smartFarm/components/common.vue';
import stream from '@/views/smartFarm/components/stream.vue';
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { getAssetsFile } from '@/utils/index.js';
import * as echarts from 'echarts';
import BugData from '@/views/smartFarm/components/bugData.vue';
import SickData from '@/views/smartFarm/components/sickData.vue';
const currentDevice = ref(0);
const devices = ref([
{
name: 'A-001',
icon: 'temp',
detail: 'A区-监控设备1',
status: '1',
id: 0,
},
{
name: 'A-002',
icon: 'temp',
detail: 'A区-监控设备2',
status: '1',
id: 1,
},
{
name: 'A-003',
icon: 'ph',
detail: 'A区-监控设备3',
status: '1',
id: 2,
},
{
name: 'A-004',
icon: 'ph',
detail: 'A区-监控设备4',
status: '-1',
id: 3,
},
{
name: 'A-005',
icon: 'O2',
detail: 'A区-监控设备5',
status: '1',
id: 4,
},
{
name: 'A-006',
icon: 'elect',
detail: 'A区-监控设备6',
status: '0',
id: 5,
},
{
name: 'B-001',
icon: 'light',
detail: 'B区-监控设备1',
status: '1',
id: 6,
},
{
name: 'B-002',
icon: 'elect',
detail: 'B区-监控设备2',
status: '-1',
id: 7,
},
{
name: 'B-003',
icon: 'dust',
detail: 'B区-监控设备3',
status: '1',
id: 8,
},
{
name: 'B-004',
icon: 'dust',
detail: 'B区-监控设备4',
status: '1',
id: 9,
},
{
name: 'B-005',
icon: 'float',
detail: 'B区-监控设备5',
status: '1',
id: 10,
},
{
name: 'B-006',
icon: 'float',
detail: 'B区-监控设备6',
status: '1',
id: 11,
},
]);
const rules = ref([
{
name: '温度',
icon: 'temp',
unit: '℃',
goat: '15',
status: '1',
},
{
name: 'PH值',
icon: 'ph',
unit: '',
goat: '6.5',
status: '1',
},
{
name: '溶解氧',
icon: 'O2',
goat: '0.4',
unit: 'mg/L',
status: '1',
},
{
name: '色度',
icon: 'light',
goat: '15',
unit: 'PCU',
status: '1',
},
{
name: '浊度',
icon: 'dust',
goat: '1.5',
unit: 'NTU',
status: '1',
},
{
name: '导电率',
icon: 'elect',
goat: '3000',
unit: 'μS/cm',
status: '1',
},
{
name: '悬浮物',
icon: 'float',
goat: '9000',
unit: 'mg/L',
status: '0',
},
]);
const isFullscreen = ref(false);
const toggleFullscreen = () => {
isFullscreen.value = !isFullscreen.value;
};
const chooseIcon = (type) => {
switch (type) {
case 'light':
return '分光器.png';
case 'float':
return '悬浮物.png';
case 'O2':
return '水质溶解氧.png';
case 'elect':
return '水质电导率.png';
case 'dust':
return '浊度.png';
case 'temp':
return '温度.png';
case 'ph':
return '酸碱度.png';
}
};
// #endregion
</script>
<template> <template>
<div> <div></div>
<common>
<template #main>
<div>
<devices :title="'病虫害监测设备'" :devices="devices"></devices>
</div>
<div style="margin-top: 10px; display: flex; justify-content: space-between">
<div style="display: flex; justify-content: space-between; margin-top: 10px">
<stream :title="'病害监测实时监控'" :devices="devices" style="width: 60%; height: fit-content"></stream>
<div style="width: 38%">
<el-card style="border-radius: 16px; padding: 10px">
<div style="font-size: 16px; font-weight: bold; text-align: left; color: #000">虫害数据</div>
<sick-data style="width: 38%; min-width: 300px"></sick-data>
</el-card>
</div>
</div>
</div>
<div style="margin-top: 10px; display: flex; justify-content: space-between">
<div style="display: flex; justify-content: space-between; margin-top: 10px; width: 100%">
<stream :title="'虫害监测实时监控'" :devices="devices" style="width: 60%; height: fit-content"></stream>
<div style="width: 38%">
<el-card style="border-radius: 16px; padding: 10px">
<div style="font-size: 16px; font-weight: bold; text-align: left; color: #000">虫害数据</div>
<bug-data style="width: 38%; min-width: 300px"></bug-data>
</el-card>
</div>
</div>
</div>
</template>
</common>
</div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss"></style>
.rates {
margin: 10px 0;
height: 100px;
font-size: 14px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
background-size: 80%;
background-repeat: no-repeat;
background-position: center;
width: 25%;
img {
height: 20px;
}
}
</style>

View File

@ -0,0 +1,191 @@
<template>
<section>
<common>
<template #main>
<div>
<ProduceDevices :title="'喷灌滴灌设备'" :devices="devices"></ProduceDevices>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 20px">
<MyTable :title="'喷灌滴灌策略'" :data="leftTableData" :column="leftTableTitle" style="width: 60%; margin-right: 20px"></MyTable>
<MyTable :title="'喷灌滴灌记录'" :data="rightTableData" :column="rightTableTitle" style="flex: 1"></MyTable>
</div>
</template>
</common>
</section>
</template>
<script setup>
import { ref } from 'vue';
import Common from '../components/common.vue';
import MyTable from '@/views/smartFarm/components/myTable.vue';
import ProduceDevices from '@/views/smartFarm/components/produceDevices.vue';
const devices = ref([
{
name: 'A-001',
serial: 'YM20250101001', //
icon: 'water', // plant gogga water
isOpen: 1, // 0: 1:
isOperation: 0, // 0: 1:
status: '1', // -1: 0:线 1:
id: 0,
},
{
name: 'A-002',
serial: 'YM20250101002',
icon: 'water',
isOpen: 0,
isOperation: 1,
status: '1',
id: 1,
},
{
name: 'A-003',
serial: 'YM20250101003',
icon: 'water',
isOpen: 0,
isOperation: 0,
status: '-1',
id: 2,
},
{
name: 'A-004',
serial: 'YM20250101004',
icon: 'water',
isOpen: 1,
isOperation: 0,
status: '0',
id: 3,
},
{
name: 'A-005',
serial: 'YM20250101005',
icon: 'water',
isOpen: 0,
isOperation: 1,
status: '1',
id: 4,
},
{
name: 'A-006',
serial: 'YM20250101006',
icon: 'water',
isOpen: 1,
isOperation: 0,
status: '1',
id: 5,
},
]);
const leftTableData = ref([
{
name: '土壤温度',
value: '>21°C',
device: '喷灌设备',
behavior: '开启',
time: 10,
},
{
name: '土壤湿度',
value: '>18%',
device: '滴灌设备',
behavior: '开启',
time: 15,
},
{
name: '光照强度',
value: '>偏高',
device: '滴灌设备',
behavior: '开启',
time: 5,
},
{
name: '短期降水',
value: '>偏低',
device: '喷灌设备',
behavior: '开启',
time: '10',
},
{
name: '风速',
value: '>中风',
device: '通风窗',
behavior: '关闭',
time: '/',
},
]);
const leftTableTitle = ref([
{
label: '参数名称',
prop: 'name',
width: 'auto',
},
{
label: '参数值',
prop: 'value',
width: 'auto',
},
{
label: '智能设备',
prop: 'device',
width: 'auto',
},
{
label: '机械行为',
prop: 'behavior',
width: 'auto',
},
{
label: '持续时间(min)',
prop: 'time',
width: 'auto',
},
]);
const rightTableData = ref([
{
date: '2025-01-01 10:36',
device: '喷灌设备',
behavior: '开启',
},
{
date: '2025-01-01 10:30',
device: '滴灌设备',
behavior: '关闭',
},
{
date: '2025-01-01 10:22',
device: '喷灌设备',
behavior: '开启',
},
{
date: '2025-01-01 10:10',
device: '滴灌设备',
behavior: '关闭',
},
{
date: '2025-01-01 10:00',
device: '通风窗',
behavior: '开启',
},
]);
const rightTableTitle = ref([
{
label: '执行时间',
prop: 'date',
width: 'auto',
},
{
label: '智能设备',
prop: 'device',
width: 'auto',
},
{
label: '机械行为',
prop: 'behavior',
width: 'auto',
},
]);
</script>
<style lang="scss" scoped></style>

View File

@ -0,0 +1,211 @@
<template>
<section>
<common>
<template #main>
<div>
<ControlDevices :devices="devices"></ControlDevices>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 20px">
<MyTable :title="'操作时间'" :data="tableData" :column="tableTitle" style="width: 100%" class="my-table"></MyTable>
</div>
</template>
</common>
</section>
</template>
<script setup>
import { ref } from 'vue';
import Common from '../components/common.vue';
import MyTable from '@/views/smartFarm/components/myTable.vue';
import ControlDevices from '@/views/smartFarm/components/controlDevices.vue';
const devices = ref([
{
title: '排水泵站',
devices: [
{
name: 'A-001',
serial: 'YM20250101001', //
icon: 'pump', // pump gate sensor
isOpen: 1, // 0: 1:
isOperation: 0, // 0: 1:
status: '1', // -1: 0:线 1:
id: 0,
},
{
name: 'A-002',
serial: 'YM20250101002',
icon: 'pump',
isOpen: 0,
isOperation: 1,
status: '1',
id: 1,
},
{
name: 'A-003',
serial: 'YM20250101003',
icon: 'pump',
isOpen: 0,
isOperation: 0,
status: '-1',
id: 2,
},
{
name: 'A-004',
serial: 'YM20250101004',
icon: 'pump',
isOpen: 1,
isOperation: 0,
status: '0',
id: 3,
},
],
},
{
title: '电动闸门',
devices: [
{
name: 'A-001',
serial: 'YM20250101001', //
icon: 'gate', // pump gate sensor
isOpen: 1, // 0: 1:
isOperation: 0, // 0: 1:
status: '1', // -1: 0:线 1:
id: 0,
},
{
name: 'A-002',
serial: 'YM20250101002',
icon: 'gate',
isOpen: 0,
isOperation: 1,
status: '1',
id: 1,
},
{
name: 'A-003',
serial: 'YM20250101003',
icon: 'gate',
isOpen: 0,
isOperation: 0,
status: '-1',
id: 2,
},
{
name: 'A-004',
serial: 'YM20250101004',
icon: 'gate',
isOpen: 1,
isOperation: 0,
status: '0',
id: 3,
},
],
},
{
title: '水位传感器',
devices: [
{
name: 'A-001',
serial: 'YM20250101001', //
icon: 'sensor', // pump gate sensor
isOpen: 1, // 0: 1:
isOperation: 0, // 0: 1:
status: '1', // -1: 0:线 1:
id: 0,
},
{
name: 'A-002',
serial: 'YM20250101002',
icon: 'sensor',
isOpen: 0,
isOperation: 1,
status: '1',
id: 1,
},
{
name: 'A-003',
serial: 'YM20250101003',
icon: 'sensor',
isOpen: 0,
isOperation: 0,
status: '-1',
id: 2,
},
{
name: 'A-004',
serial: 'YM20250101004',
icon: 'sensor',
isOpen: 1,
isOperation: 0,
status: '0',
id: 3,
},
],
},
]);
const tableData = ref([
{
name: '卷膜器',
serial: 'P-1110101',
behavior: '开启',
date: '2025-01-01 09:00:00',
},
{
name: '智能电动天窗',
serial: 'P-1110102',
behavior: '开启',
date: '2025-01-01 09:10:12',
},
{
name: '链式开窗',
serial: 'P-1110103',
behavior: '关闭',
date: '2025-01-01 09:22:20',
},
{
name: '卷膜器',
serial: 'P-1110104',
behavior: '开启',
date: '2025-01-01 09:03:10',
},
{
name: '智能电动天窗',
serial: 'P-1110105',
behavior: '关闭',
date: '2025-01-01 10:10:01',
},
]);
const tableTitle = ref([
{
label: '设备名称',
prop: 'name',
width: 'auto',
},
{
label: '设备编码',
prop: 'serial',
width: 'auto',
},
{
label: '操作',
prop: 'behavior',
width: 'auto',
},
{
label: '操作日期',
prop: 'date',
width: 'auto',
},
]);
</script>
<style lang="scss" scoped>
.my-table {
&:deep(table) {
table-layout: fixed;
width: 100%;
}
}
</style>

View File

@ -0,0 +1,191 @@
<template>
<section>
<common>
<template #main>
<div>
<ProduceDevices :title="'病虫害预防设备'" :devices="devices"></ProduceDevices>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 20px">
<MyTable :title="'病虫害预防策略'" :data="leftTableData" :column="leftTableTitle" style="width: 60%; margin-right: 20px"></MyTable>
<MyTable :title="'防治记录'" :data="rightTableData" :column="rightTableTitle" style="flex: 1"></MyTable>
</div>
</template>
</common>
</section>
</template>
<script setup>
import { ref } from 'vue';
import Common from '../components/common.vue';
import MyTable from '@/views/smartFarm/components/myTable.vue';
import ProduceDevices from '@/views/smartFarm/components/produceDevices.vue';
const devices = ref([
{
name: 'A-001',
serial: 'YM20250101001', //
icon: 'gogga', // plant gogga water
isOpen: 1, // 0: 1:
isOperation: 0, // 0: 1:
status: '1', // -1: 0:线 1:
id: 0,
},
{
name: 'A-002',
serial: 'YM20250101002',
icon: 'gogga',
isOpen: 0,
isOperation: 1,
status: '1',
id: 1,
},
{
name: 'A-003',
serial: 'YM20250101003',
icon: 'gogga',
isOpen: 0,
isOperation: 0,
status: '-1',
id: 2,
},
{
name: 'A-004',
serial: 'YM20250101004',
icon: 'gogga',
isOpen: 1,
isOperation: 0,
status: '0',
id: 3,
},
{
name: 'A-005',
serial: 'YM20250101005',
icon: 'gogga',
isOpen: 0,
isOperation: 1,
status: '1',
id: 4,
},
{
name: 'A-006',
serial: 'YM20250101006',
icon: 'gogga',
isOpen: 1,
isOperation: 0,
status: '1',
id: 5,
},
]);
const leftTableData = ref([
{
name: '虫群数量',
value: '>20',
device: '诱虫灯',
behavior: '开启',
time: 10,
},
{
name: '诱捕数量',
value: '>30',
device: '灭虫灯',
behavior: '开启',
time: 15,
},
{
name: '病理',
value: '叶腐病',
device: '农药喷洒机',
behavior: '开启',
time: 5,
},
{
name: '虫群数量',
value: '>20',
device: '通风窗',
behavior: '关闭',
time: '/',
},
{
name: '诱捕数量',
value: '>30',
device: '幕布',
behavior: '开启',
time: '/',
},
]);
const leftTableTitle = ref([
{
label: '参数名称',
prop: 'name',
width: 'auto',
},
{
label: '参数值',
prop: 'value',
width: 'auto',
},
{
label: '智能设备',
prop: 'device',
width: 'auto',
},
{
label: '机械行为',
prop: 'behavior',
width: 'auto',
},
{
label: '持续时间(min)',
prop: 'time',
width: 'auto',
},
]);
const rightTableData = ref([
{
date: '2025-01-01 10:36',
device: '农药喷洒机',
behavior: '开启',
},
{
date: '2025-01-01 10:30',
device: '通风窗',
behavior: '关闭',
},
{
date: '2025-01-01 10:22',
device: '诱虫灯',
behavior: '开启',
},
{
date: '2025-01-01 10:10',
device: '灭虫灯',
behavior: '开启',
},
{
date: '2025-01-01 10:00',
device: '幕布',
behavior: '开启',
},
]);
const rightTableTitle = ref([
{
label: '执行时间',
prop: 'date',
width: 'auto',
},
{
label: '智能设备',
prop: 'device',
width: 'auto',
},
{
label: '机械行为',
prop: 'behavior',
width: 'auto',
},
]);
</script>
<style lang="scss" scoped></style>