149 lines
4.8 KiB
Vue
149 lines
4.8 KiB
Vue
<template>
|
|
<div class="data-plant-index">
|
|
<baseBg :name-val="'plant'" top-title="智慧种植管理系统">
|
|
<template #center>
|
|
<el-row style="width: 100%; height: 100%">
|
|
<el-col :span="6" class="left-charts">
|
|
<div class="left-charts-item">
|
|
<customBack top-title="智慧种植种类分析" :top-postion="'left'">
|
|
<template #back>
|
|
<plantTypeCharts></plantTypeCharts>
|
|
</template>
|
|
</customBack>
|
|
</div>
|
|
<div class="left-charts-item">
|
|
<customBack top-title="昆虫害监测" :top-postion="'left'">
|
|
<template #back>
|
|
<insectPestsCharts></insectPestsCharts>
|
|
</template>
|
|
</customBack>
|
|
</div>
|
|
<div class="left-charts-item">
|
|
<customBack top-title="病理害监测" :top-postion="'left'">
|
|
<template #back>
|
|
<pathologyCharts></pathologyCharts>
|
|
</template>
|
|
</customBack>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-row style="height: 67%">
|
|
<el-col :span="24" class="center-top">
|
|
<div class="notice">
|
|
<noticeBar :height="'40px'"></noticeBar>
|
|
</div>
|
|
<div class="top">
|
|
<environment></environment>
|
|
</div>
|
|
<div class="map-gis">
|
|
<plantgs></plantgs>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row style="height: 33%" :gutter="30">
|
|
<el-col :span="12" style="height: 100%">
|
|
<customBack top-title="水肥检测分析" :top-postion="'left'">
|
|
<template #back>
|
|
<waterfertilizerCharts></waterfertilizerCharts>
|
|
</template>
|
|
</customBack>
|
|
</el-col>
|
|
<el-col :span="12" style="height: 100%">
|
|
<customBack top-title="智慧水肥灌溉" :top-postion="'right'">
|
|
<template #back>
|
|
<irrigationCharts></irrigationCharts>
|
|
</template>
|
|
</customBack>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="6" class="right-charts">
|
|
<div class="right-charts-item">
|
|
<customBack top-title="智慧监控 A区 QQI" :top-postion="'right'">
|
|
<template #back>
|
|
<monitoringScreen></monitoringScreen>
|
|
</template>
|
|
</customBack>
|
|
</div>
|
|
<div class="right-charts-item">
|
|
<customBack top-title="种植产量分析" :top-postion="'right'">
|
|
<template #back>
|
|
<yieldCharts></yieldCharts>
|
|
</template>
|
|
</customBack>
|
|
</div>
|
|
<div class="right-charts-item">
|
|
<customBack top-title="水质检测分析" :top-postion="'right'">
|
|
<template #back>
|
|
<waterdetectionCharts></waterdetectionCharts>
|
|
</template>
|
|
</customBack>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
</baseBg>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import baseBg from '@/components/baseBg.vue';
|
|
import customBack from '@/components/customBack.vue';
|
|
import plantTypeCharts from './components/plantTypeCharts.vue';
|
|
import insectPestsCharts from './components/insectPestsCharts';
|
|
import pathologyCharts from './components/pathologyCharts.vue';
|
|
import waterfertilizerCharts from './components/waterfertilizerCharts.vue';
|
|
import irrigationCharts from './components/irrigationCharts.vue';
|
|
import yieldCharts from './components/yieldCharts.vue';
|
|
import waterdetectionCharts from './components/waterdetectionCharts.vue';
|
|
import environment from './components/environment.vue';
|
|
import plantgs from './components/plantgs.vue';
|
|
import monitoringScreen from './components/monitoringScreen.vue';
|
|
import noticeBar from './components/noticeBar.vue';
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.data-plant-index {
|
|
.left-charts {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
}
|
|
.left-charts-item {
|
|
width: 100%;
|
|
height: calc((100% - 30px) / 3);
|
|
}
|
|
|
|
.right-charts {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
}
|
|
.right-charts-item {
|
|
width: 100%;
|
|
height: calc((100% - 30px) / 3);
|
|
}
|
|
|
|
.center-top {
|
|
padding: 16px;
|
|
.notice,
|
|
.top,
|
|
.map-gis {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
.notice {
|
|
height: 40px;
|
|
}
|
|
.top {
|
|
height: 80px;
|
|
}
|
|
.map-gis {
|
|
height: calc(100% - 140px);
|
|
}
|
|
}
|
|
}
|
|
</style>
|