<!--
 * @Author: your name
 * @Date: 2021-10-21 17:51:22
 * @LastEditTime: 2021-10-27 10:50:16
 * @LastEditors: Please set LastEditors
 * @Description: 环境监测
 * @FilePath: \hyyfScreen\src\views\Environment\Environment.vue
-->
<template>
  <div class="environment">
    <div class="env-side">
      <div class="env-side-item">
        <pro-board :title="'PH'">
          <div class="env-side-item-content">
            <chart-dashboard :id="1" :data="phData"></chart-dashboard>
          </div>
        </pro-board>
      </div>
      <div class="env-side-item">
        <pro-board :title="'COD'">
          <div class="env-side-item-content">
            <chart-dashboard :id="2" :data="codData"></chart-dashboard>
          </div>
        </pro-board>
      </div>
    </div>
    
    <div class="env-certain">
      <div class="env-certain-top">
        <div class="kuang"></div>
      </div>

      <div class="env-certain-bottom">
        <div class="env-certain-bottom-item">
          <pro-board :title="'总磷'">
            <div class="certain-bottom-item-chart">
              <chart-dashboard :id="3" :data="totalPData"></chart-dashboard>
            </div>
          </pro-board>
        </div>
        <div class="env-certain-bottom-item">
          <pro-board :title="'总氮'">
            <div class="certain-bottom-item-chart">
              <chart-dashboard :id="4" :data="totalNData"></chart-dashboard>
            </div>
          </pro-board>
        </div>
      </div>
    </div>

    <div class="env-side">
      <div class="env-side-item item-bgc">
        <pro-board :title="'流量'">
          <div class="env-side-item-content">
            <chart-dashboard :id="5" :data="liuData"></chart-dashboard>
          </div>
        </pro-board>
      </div>
      <div class="env-side-item item-bgc">
        <pro-board :title="'氨氮'">
          <div class="env-side-item-content">
            <chart-dashboard :id="6" :data="nhData"></chart-dashboard>
          </div>
        </pro-board>
      </div>
    </div>
  </div>
</template>

<script>
import ProBoard from '../Production/board/ProBoard.vue'
import ChartDashboard from './charts/ChartDashboard.vue'

export default {
  name: "Environment",
  components: {
    ProBoard,
    ChartDashboard
  },
  data() {
    return {
      phData: {
        data: 5.67,
        splitNumber: 13,
        max: 13,
        unit: ''
      },
      codData: {
        data: 61.091,
        splitNumber: 12,
        max: 120,
        unit: 'mg/L'
      },
      totalPData: {
        data: 0.323,
        splitNumber: 12,
        max: 1.2,
        unit: 'mg/L'
      },
      totalNData: {
        data: 31.091,
        splitNumber: 12,
        max: 60,
        unit: 'mg/L'
      },
      liuData: {
        data: 143.26,
        splitNumber: 12,
        max: 240,
        unit: 'T'
      },
      nhData: {
        data: 0.6191,
        splitNumber: 12,
        max: 1.2,
        unit: 'mg/L'
      }
    }
  },
}
</script>

<style scoped>
.environment {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

/* 两边 */
.env-side {
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.env-side-item {
  width: 100%;
  height: 40%;
  background-color: rgb(3,16,50);
}
.env-side-item-content {
  width: 80%;
  height: 78%;
  padding: 0 10%;
}

/* 中间 */
.env-certain {
  width: 55%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* 中间 —— 上面 */
.env-certain-top {
  width: 100%;
  height: 68%;
  background-color: rgb(3,16,50);
}
.kuang {
  margin: auto;
  width: 90%;
  height: 100%;
  background: url("../../assets/BioSafety/kuang.png") no-repeat;
  background-size: contain;
}

/* 中间 —— 下面 */
.env-certain-bottom {
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: space-between;
}
.env-certain-bottom-item {
  background-color: rgb(3,16,50);
  height: 100%;
  width: 46%;
}
.certain-bottom-item-chart {
  width: 79%;
  height: 100%;
  margin: auto;
}
</style>