daimp-front/sub-operation-service/src/views/dashboard/index.vue

<template>
  <div class="data-home-index">
    <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>
              <entitieslist></entitieslist>
            </template>
          </customBack>
        </div>
        <div class="left-charts-item">
          <customBack top-title="电商数据统计" :top-postion="'left'">
            <template #back>
              <waterIntakeCharts></waterIntakeCharts>
            </template>
          </customBack>
        </div>
        <div class="left-charts-item">
          <customBack top-title="涉农金融数据统计" :top-postion="'left'">
            <template #back>
              <growthIndexesCharts></growthIndexesCharts>
            </template>
          </customBack>
        </div>
      </el-col>
      <el-col :span="12">
        <businessMap></businessMap>
      </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>
                <healthStatusCharts></healthStatusCharts>
              </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="分拣包装数据统计" :top-postion="'right'">
            <template #back>
              <InventoryCharts></InventoryCharts>
            </template>
          </customBack>
        </div>
        <div class="right-charts-item">
          <customBack top-title="仓储物流数据统计" :top-postion="'right'">
            <template #back>
              <div style="display: flex; justify-content: space-evenly; align-items: center">
                <div style="width: 200px; height: 200px">
                  <benefitCharts></benefitCharts>
                </div>
                <div style="width: 200px; height: 200px">
                  <benefitChartsl></benefitChartsl>
                </div>
              </div>
            </template>
          </customBack>
        </div>
        <div class="right-charts-item">
          <customBack top-title="公共品牌数据统计" :top-postion="'right'">
            <template #back>
              <businessFour :data="four" />
            </template>
          </customBack>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import InventoryCharts from './components/InventoryCharts.vue';
import waterIntakeCharts from './components/waterIntakeCharts.vue';
import growthIndexesCharts from './components/growthIndexesCharts.vue';
import businessFour from './components/businessFour.vue';
import plantgs from './components/plantgs.vue';
import noticeBar from './components/noticeBar.vue';
import irrigationCharts from './components/irrigationCharts.vue';
// import healthStatusCharts from './components/healthStatusCharts.vue';
import monitoringScreen from './components/monitoringScreen.vue';
import benefitCharts from './components/benefitCharts.vue';
import benefitChartsl from './components/benefitChartsl.vue';
import { reactive } from 'vue';
import entitieslist from './components/entitieslist.vue';
import businessMap from './components/businessMap.vue';
// import deviceCharts from './components/deviceCharts.vue';

let four = reactive({
  percent: 0.3998,
  success: 253,
  warning: 5,
  danger: 0,
});
</script>
<style lang="scss" scoped>
.data-home-index {
  background-color: black;
  height: 70vh;
  margin: 0 10%;
  .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>