<!--
 * @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" v-loading="costLoading"
           element-loading-text="拼命加载中"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.8)">
        <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" v-loading="costLoading"
           element-loading-text="拼命加载中"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.8)">
        <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">
          <iframe v-if="isVideo"  :src="'static/jinm/index.html?'+'1'+','+ wsUrl +','+ rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
        </div>
      </div>

      <div class="env-certain-bottom">
        <div class="env-certain-bottom-item" v-loading="costLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
          <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" v-loading="costLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
          <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" v-loading="costLoading"
           element-loading-text="拼命加载中"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.8)">
        <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" v-loading="costLoading"
           element-loading-text="拼命加载中"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.8)">
        <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'
import { getEnvList, getBaseVideo } from "@/utils/api";

export default {
  name: "Environment",
  components: {
    ProBoard,
    ChartDashboard
  },
  data() {
    return {
      phData: {
        data: 0,
        splitNumber: 14,
        max: 14,
        unit: ''
      },
      codData: {
        data: 0,
        splitNumber: 12,
        max: 540,
        unit: 'mg/L'
      },
      totalPData: {
        data: 0,
        splitNumber: 12,
        max: 1.2,
        unit: 'mg/L'
      },
      totalNData: {
        data: 0,
        splitNumber: 12,
        max: 60,
        unit: 'mg/L'
      },
      liuData: {
        data: 0,
        splitNumber: 12,
        max: 12,
        unit: 'L/s'
      },
      nhData: {
        data: 0,
        splitNumber: 12,
        max: 1.2,
        unit: 'mg/L'
      },
      costLoading: true,
      wsUrl: '',
      rtspUrl: '',
      list: [],
      timer: null,
      num: 1,
      isVideo: false
    }
  },
  methods: {
    init() {
      getEnvList({}).then(res => {
        if(res.code=== 10000) {
          this.phData.data = res.data.phPj;
          this.codData.data = res.data.hxxylPj;
          this.liuData.data = res.data.wsPj;
          this.nhData.data = res.data.adPj;
        }
        this.costLoading = false;
      })
      let params = {
        type: 2
      }
      getBaseVideo(params).then(res => {
        this.isVideo = true;
        if(res.code === 10000) {
          this.list = res.data;
          this.wsUrl = res.data[0].wsUrl;
          this.rtspUrl = res.data[0].rtspUrl;
        }
      })
    }
  },
  mounted() {
    this.init();
    var that = this;
    this.timer = setInterval(() => {
      if(that.num > 3) {
        that.num = 0;
      }
      that.wsUrl = that.list[that.num].wsUrl;
      that.rtspUrl = that.list[that.num].rtspUrl;
      that.num++;
    }, 60000)
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</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: 100%;
  height: 100%;
  background: url("../../assets/BioSafety/kuang.png") no-repeat;
  background-size: contain;
  box-sizing: border-box;
  padding: 20px;
}

/* 中间 —— 下面 */
.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>
