115 lines
2.4 KiB
Vue
115 lines
2.4 KiB
Vue
<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="'灌溉监测监控'" :num="5" :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-003',
|
|
icon: 'humidity',
|
|
detail: 'A区-监控设备7',
|
|
status: '0',
|
|
id: 2,
|
|
},
|
|
{
|
|
name: 'A-005',
|
|
icon: 'valve',
|
|
detail: 'A区-监控设备5',
|
|
status: '-1',
|
|
id: 4,
|
|
},
|
|
{
|
|
name: 'A-007',
|
|
icon: 'sprinkler',
|
|
status: '0',
|
|
detail: 'A区-监控设备4',
|
|
id: 6,
|
|
},
|
|
{
|
|
name: 'A-009',
|
|
detail: 'A区-监控设备9',
|
|
icon: 'waterSupplyValve',
|
|
status: '-1',
|
|
id: 8,
|
|
},
|
|
{
|
|
name: 'A-011',
|
|
detail: 'A区-监控设备3',
|
|
icon: 'intelligentValveControl',
|
|
status: '1',
|
|
id: 10,
|
|
},
|
|
]);
|
|
|
|
const srcList = ref();
|
|
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>
|