131 lines
3.7 KiB
Vue
131 lines
3.7 KiB
Vue
<template>
|
||
<section>
|
||
<common>
|
||
<template #main>
|
||
<div>
|
||
<devices :title="'智能配肥设备'" :devices="devices"></devices>
|
||
</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">
|
||
<div style="font-size: 16px; font-weight: bold; text-align: left">配肥分析</div>
|
||
<div class="plantStatus">
|
||
<div class="leftKey">土壤酸碱度:</div>
|
||
<div class="rightValue">正常</div>
|
||
</div>
|
||
<div class="plantStatus">
|
||
<div class="leftKey">土壤养分含量:</div>
|
||
<div class="errorValue">N 元素不足</div>
|
||
</div>
|
||
<div class="plantStatus">
|
||
<div class="leftKey">光照强度:</div>
|
||
<div class="errorValue">偏高</div>
|
||
</div>
|
||
<div class="plantStatus">
|
||
<div class="leftKey">风速:</div>
|
||
<div class="rightValue">微风</div>
|
||
</div>
|
||
<div class="plantStatus">
|
||
<div class="leftKey">作物生长状态:</div>
|
||
<div class="rightValue">良好</div>
|
||
</div>
|
||
<div class="plantStatus">
|
||
<div class="leftKey">设备状态:</div>
|
||
<div class="rightValue">正常</div>
|
||
</div>
|
||
<div class="plantStatus">
|
||
<div class="leftKey">肥料储备:</div>
|
||
<div class="rightValue">充足</div>
|
||
</div>
|
||
<div style="text-align: left">
|
||
<div style="font-size: 14px; text-align: left">配肥记录：</div>
|
||
</div>
|
||
<div style="margin-top: 20px">
|
||
<el-image
|
||
style="width: 100%"
|
||
:src="getAssetsFile('images/mockPic/智能配肥.png')"
|
||
:zoom-rate="1.2"
|
||
:max-scale="7"
|
||
:min-scale="0.2"
|
||
:preview-src-list="srcList"
|
||
show-progress
|
||
:initial-index="4"
|
||
fit="cover"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
</common>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onBeforeUnmount } 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 * as echarts from 'echarts';
|
||
import { getAssetsFile } from '@/utils/index.js';
|
||
/* --------------- data --------------- */
|
||
// #region
|
||
const devices = ref([
|
||
{
|
||
name: 'A-001',
|
||
icon: 'fertilizerTank',
|
||
detail: 'A区-监控设备9',
|
||
status: '0',
|
||
id: 0,
|
||
},
|
||
{
|
||
name: 'A-003',
|
||
icon: 'fertilization',
|
||
detail: 'A区-监控设备7',
|
||
status: '0',
|
||
id: 2,
|
||
},
|
||
{
|
||
name: 'A-004',
|
||
icon: 'mixingTank',
|
||
detail: 'A区-监控设备1',
|
||
status: '-1',
|
||
id: 3,
|
||
},
|
||
{
|
||
name: 'A-007',
|
||
icon: 'mixingPump',
|
||
status: '0',
|
||
detail: 'A区-监控设备4',
|
||
id: 6,
|
||
},
|
||
{
|
||
name: 'A-010',
|
||
detail: 'A区-监控设备10',
|
||
icon: 'solenoidValve',
|
||
status: '0',
|
||
id: 9,
|
||
},
|
||
]);
|
||
const srcList = ref([getAssetsFile('images/mockPic/水质检测.png')]);
|
||
// #endregion
|
||
/* --------------- methods --------------- */
|
||
// #region
|
||
|
||
// #endregion
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.plantStatus {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
margin: 7px 0;
|
||
.leftKey {
|
||
color: #000000;
|
||
}
|
||
.rightValue {
|
||
color: #25bf82;
|
||
}
|
||
}
|
||
</style>
|