daimp-front/sub-government-screen-service/src/views/plant/index.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" style="height: 100%">
            <el-row style="height: 67%">
              <el-col :span="24" class="center-top" style="height: 100%">
                <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 plantTypeCharts from './components/plantTypeCharts.vue';
import insectPestsCharts from './components/insectPestsCharts.vue';
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>