<template>
  <div id="elec-index"  ref="appRef">
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div v-else class="host-body bg-elec">
      <div class="d-flex jc-center">
        <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
        <div class="d-flex jc-center">
          <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
          <div class="title">
            <span class="title-text">电厂监控大屏</span>
            <dv-decoration-6
              class="title-bototm"
              :reverse="true"
              :color="['#50e3c2', '#67a1e5']"
              style="width:3.125rem;height:.1rem;"
            />
          </div>
          <dv-decoration-8
            :reverse="true"
            :color="['#568aea', '#000000']"
            style="width:2.5rem;height:.625rem;"
          />
        </div>
        <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
      </div>

      <!-- 第二行 -->
      <div class="d-flex jc-between px-2">
        <div class="d-flex" style="width: 40%">
          <div
            class="react-right ml-4" v-bind:style="{backgroundColor:bgCol1,width:wh,textAlign:tAlign}"
            @click="changeDashboard(1)">
            <span class="react-before"></span>
            <span class="text" id="aa">数据监控</span>
          </div>
          <div class="react-right ml-3" v-bind:style="{backgroundColor:bgCol2,width:wh,textAlign:tAlign}"
               @click="changeDashboard(2)">
            <span class="text colorBlue"></span>
            <span class="text" id="bb">蒸汽平衡</span>
          </div>
          <div class="react-right ml-2" v-bind:style="{backgroundColor:bgCol3,width:wh,textAlign:tAlign}"
               @click="changeDashboard(3)">
            <span class="text colorBlue"></span>
            <span class="text" id="cc">环保监控</span>
          </div>
        </div>
        <div style="width: 40%" class="d-flex">
          <div class="react-left bg-color-blue mr-3">
            <span class="text fw-b">北京时间</span>
          </div>
          <div
            class="react-left mr-3"
            style="width: 6.25rem; background-color: #0f1325;"
          >
            <span style="text-align: center" class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
          </div>
          <div class="react-left  mr-3" style="width: 2.25rem; background-color: #0f1325;" @click="openNewWindow">
            <span class="text fw-b"> <svg-icon icon-class="fullscreen" /></span>
          </div>
        </div>
      </div>

      <div class="body-box" v-if="dashboard === 1">
        <!-- 第三行数据 -->
        <div class="content-box">
          <div>
            <dv-border-box-12>
              <centerLeft1 :monthData="monthData" :latest30DayData="latest30DayData"/>
            </dv-border-box-12>
          </div>
          <!-- 中间 -->
          <div>
            <center :dashboardelecdata="dashboardelecdata" :latest24HourData="latest24HourData" />
          </div>
          <!-- 中间 -->
          <div>
            <centerRight2 :dashboardelecdata="[dashboardelecdata,monthData]" :latest30DayData="latest30DayData"/>
          </div>
          <div>
            <dv-border-box-13>
              <centerRight1 :fiftydayData="fiftydayData" :latest30DayData="latest30DayData"/>
            </dv-border-box-13>
          </div>
        </div>

        <!-- 第四行数据 -->
        <div class="bototm-box">
          <dv-border-box-13>
            <bottomLeft :monthData="monthData" :latest30DayData="latest30DayData"/>
          </dv-border-box-13>
          <div class="bototm-box1">
            <dv-border-box-12>
              <bottom-right :weekData="weekData" :dashboardelecdata="dashboardelecdata":latest24HourData="latest24HourData" />
            </dv-border-box-12>
            <div class="bototm-box2">
              <dv-border-box-12>
                <div class="bg-color-black">
                  <div class="d-flex pt-2 pl-2">
                <span style="color:#5cd9e8">
                  <icon name="chart-bar"></icon>
                </span>
                    <div class="d-flex">
                      <span class="fs-xl text mx-2">天然气日消耗情况</span>
                    </div>
                  </div>
                  <div>
                      <bottom-right1 :latest30DayData="latest30DayData"/>
                  </div>
                </div>
              </dv-border-box-12>
              <dv-border-box-12>
                <div class="bg-color-black">
                  <div class="d-flex pt-2 pl-2">
                <span style="color:#5cd9e8">
                  <icon name="chart-bar"></icon>
                </span>
                    <div class="d-flex">
                      <span class="fs-xl text mx-2">瞬时值</span>
                    </div>
                  </div>
                  <div>
                    <bottom-right2 :latest24HourData="latest24HourData" />
                  </div>
                </div>
              </dv-border-box-12>
            </div>
          </div>
        </div>
      </div>
      <div class="body-box" v-if="dashboard === 2">
        <div>
          <front-elec-two :dashboardelecdata="dashboardelecdata"></front-elec-two>
        </div>

      </div>
      <div class="body-box" v-if="dashboard === 3">
        <div>
          <front-elec-three
            :dashboardelecdata="dashboardelecdata"
            :dashboarddata="dashboarddata"
            :latest7DayData="latest7DayData"
            :alarmList="alarmList"
          >
          </front-elec-three>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import centerLeft1 from "./centerLeft1";
import centerLeft2 from "./centerLeft2";
import centerRight1 from "./centerRight1";
import centerRight2 from "./centerRight2";
import center from "./center";
import bottomLeft from "./bottomLeft";
import bottomRight from "./bottomRight";
import bottomRight1 from "./echart/bottom/bottomRightChart1"
import bottomRight2 from "./echart/bottom/bottomRightChart2"
import frontElecTwo from "@/views/monitor/elec/frontElecTwo";
import frontElecThree from "@/views/monitor/elec/frontElecThree";
import '@/assets/styles/index.scss' // global css
import '@/common/flexible.js';
import dayjs from "dayjs";
import {selectLast,selectMonth,selecctfiftyday} from "@/api/aspen/dashboarddayelec";
import {selectWeek} from "@/api/aspen/dashboarddayeleceight";
import {getRealtimeByMaxDate} from "@/api/aspen/realtime.js";
import {listDayLatest7, listDayLatest30} from "@/api/aspen/day.js";
import {listHourLatest24} from "@/api/aspen/hour.js";
import {listAlarm} from "@/api/aspen/alarm.js";
export default {
  data() {
    return {
      loading: true,
      dashboard: 1,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      timer:null,
      bgCol1:"#0f1325",
      bgCol2:"#0f1325",
      bgCol3:"#0f1325",
      bgCol0:"#0a84ff",
      wh:"3.25rem",
      tAlign:"left",
      // 预警数据
      alarmList: [],
      // 最近24小时的数据
      latest24HourData: [],
      // 最近7天的数据
      latest7DayData: [],
      // 最近30天的数据
      latest30DayData: {},
      // 电厂大屏实时数据
      dashboardelecdata: {
        pageNum: 1,
        pageSize: 20,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null,
        gtg1Lv: null,
        gtg1Wr: null,
        gtg2Lv: null,
        gtg2Wr: null,
        gtg3Lv: null,
        gtg3Wr: null,
        stg1Lv: null,
        stg1Wr: null,
        mwhLv: null,
        mwhWr: null,
        hhp: null,
        hp: null,
        lp: null,
        mp: null,
        totalConsumption: null,
        hhpNum: null,
        hhpTemp: null,
        hpNum: null,
        hpTemp: null,
        lpNum: null,
        lpTemp: null,
        mpNum: null,
        mpTemp: null,
        shihua: null,
        shiyou: null,
        shunshiliang: null,
        ypg: null,
        daodianliang: null,
        eveLec: null,
        fenggucha: null,
        bycElec: null,
        bocElec: null,
        dataDate: null,
        dateDay: null
      },
      dashboarddata: {
        latest7DayData:[],
        rainPh: null,
        rainCod: null,
        wastePh: null,
        wasteCod: null
      },
      monthData:{
        pageNum: 1,
        pageSize: 20,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null,
        gtg1Lv: null,
        gtg1Wr: null,
        gtg2Lv: null,
        gtg2Wr: null,
        gtg3Lv: null,
        gtg3Wr: null,
        stg1Lv: null,
        stg1Wr: null,
        mwhLv: null,
        mwhWr: null,
        hhp: null,
        hp: null,
        lp: null,
        mp: null,
        totalConsumption: null,
        hhpNum: null,
        hhpTemp: null,
        hpNum: null,
        hpTemp: null,
        lpNum: null,
        lpTemp: null,
        mpNum: null,
        mpTemp: null,
        shihua: null,
        shiyou: null,
        shunshiliang: null,
        ypg: null,
        daodianliang: null,
        eveLec: null,
        fenggucha: null,
        bycElec: null,
        bocElec: null,
        dataDate: null,
        dateDay: null
      },
      weekData:{
        pageNum: 1,
        pageSize: 20,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null,
        evconsume: null,
        elecp: null,
        hechengqi: null,
        u2: null,
        dataDate: null,
        dateDay: null
      },
      fiftydayData:{
        pageNum: 1,
        pageSize: 20,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null,
        gtg1Lv: null,
        gtg1Wr: null,
        gtg2Lv: null,
        gtg2Wr: null,
        gtg3Lv: null,
        gtg3Wr: null,
        stg1Lv: null,
        stg1Wr: null,
        mwhLv: null,
        mwhWr: null,
        hhp: null,
        hp: null,
        lp: null,
        mp: null,
        totalConsumption: null,
        hhpNum: null,
        hhpTemp: null,
        hpNum: null,
        hpTemp: null,
        lpNum: null,
        lpTemp: null,
        mpNum: null,
        mpTemp: null,
        shihua: null,
        shiyou: null,
        shunshiliang: null,
        ypg: null,
        daodianliang: null,
        eveLec: null,
        fenggucha: null,
        bycElec: null,
        bocElec: null,
        dataDate: null,
        dateDay: null
      }
    };
  },
  components: {
    centerLeft1,
    centerLeft2,
    centerRight1,
    centerRight2,
    center,
    bottomLeft,
    bottomRight,
    bottomRight1,
    bottomRight2,
    frontElecTwo,
    frontElecThree
  },
  mounted() {
    if(this.dashboard===1){
      this.bgCol1="#1a5cd7"
    }
    this.timer = setInterval(()=>{
      const date= dayjs(new Date());
      this.dateDay = date.format('HH:mm:ss');
      this.dateYear = date.format('YYYY年MM月DD日');
      this.dateWeek = date.format(this.weekday[date.day()]);
    },1000),
      this.setScale();
    window.addEventListener("resize", this.debounce(this.setScale, 100));
    // * 适配处理
    this.cancelLoading();
  },
  created() {
    // 抓取实时数据
    this.getRealtimeData();
    // 每隔5秒抓取一次实时数据
    window.setInterval(() => {
      this.getRealtimeData();
    }, 5000);
    // 抓取最近7天的数据
    this.getLatest7DayData();
    // 抓取最近30天的数据
    this.getLatest30DayData();
    // 抓取最近24小时的数据
    this.getLatest24HourData();
    // 抓取预警数据
    this.getAlarmData();
    // 每隔五秒抓取一次预警数据
    window.setInterval(() => {
      this.getAlarmData();
    }, 5000);

    // this.getList1();
    // this.getMonthList1();
    // this.getWeekList();
    // this.getFiftydayList();
    // // 每隔30秒请求一次数据
    // window.setInterval(() => {
    //   setTimeout(() => {
    //     ///调取接口获取数据
    //     this.getList1();
    //   }, 0)
    // }, 30000)
    // // 一天请求一次数据
    // window.setInterval(() => {
    //   setTimeout(() => {
    //     ///调取接口获取数据
    //     this.getMonthList1();
    //   }, 0)
    // }, 1000 * 10 * 6 * 60 * 6)
    //
    // // 一天请求一次数据
    // window.setInterval(() => {
    //   setTimeout(() => {
    //     ///调取接口获取数据
    //     this.getWeekList();
    //   }, 0)
    // }, 1000 * 10 * 6 * 60 * 6)
    //
    // // 一天请求一次数据
    // window.setInterval(() => {
    //   setTimeout(() => {
    //     ///调取接口获取数据
    //     this.getFiftydayList();
    //   }, 0)
    // }, 1000 * 10 * 6 * 60 * 6)
  },
  methods: {
    /** 抓取预警数据 */
    getAlarmData() {
      listAlarm(null).then(response => {
        let data = response.rows;
        // 清空数组
        this.alarmList = [];
        for (let i = 0; i < data.length; i++) {
          this.alarmList.push([
            data[i].alarmTime.toString().substr(0, 10) + ' ' + data[i].alarmTime.toString().substr(11, 8),
            data[i].alarmValue,
            data[i].code,
            data[i].description
          ]);
        }
        // 不足8条数据，补空字符串，避免轮播表变形
        if (data.length < 8) {
          for (let i = 0; i < 8 - data.length; i++) {
            this.alarmList.push(['', '', '', '']);
          }
        }
      });
    },
    /** 抓取最近24小时的数据 */
    getLatest24HourData() {
      listHourLatest24().then(response => {
        // 最近24小时的数据
        let data = response.rows;
        for (let i = 0; i < data.length; i++) {
          this.latest24HourData.push(data[i]);
        }
      });
    },
    /** 抓取最近30天的数据 */
    getLatest30DayData() {
      listDayLatest30().then(response => {
        // 最近30天的数据
        this.latest30DayData = response.rows;
      });
    },
    /** 抓取最近7天的数据 */
    getLatest7DayData() {
      listDayLatest7().then(response => {
        // 最近7天的数据
        let data = response.rows;
        for (let i = 0; i < data.length; i++) {
          this.latest7DayData.push(data[i]);
          this.dashboarddata.latest7DayData.push(data[i]);
        }
      });
    },
    /** 抓取实时数据 */
    getRealtimeData() {
      getRealtimeByMaxDate().then(response => {
        // 电厂大屏实时数据
        let data = response.data;
        // 第一页
        this.dashboardelecdata.gtg1Lv = data.gtg1PowerGenLevel;
        this.dashboardelecdata.gtg2Lv = data.gtg2PowerGenLevel;
        this.dashboardelecdata.gtg3Lv = data.gtg3PowerGenLevel;
        this.dashboardelecdata.stg1Lv = data.stgPowerGenLevel;
        this.dashboardelecdata.mwhLv = data.totalPowerGen;
        this.dashboardelecdata.mwhWr = data.totalEfficiency;
        this.dashboardelecdata.stg1Wr = data.stgEfficiency;
        this.dashboardelecdata.gtg3Wr = data.gtg3Efficiency;
        this.dashboardelecdata.gtg2Wr = data.gtg2Efficiency;
        this.dashboardelecdata.gtg1Wr = data.gtg1Efficiency;
        this.dashboardelecdata.sub = data.sub;
        this.dashboardelecdata.elecPowerGen = data.elecPowerGen;
        this.dashboardelecdata.elecPowerSwitch = data.elecPowerSwitch;
        this.dashboardelecdata.elecUsed = data.elecUsed;
        this.dashboardelecdata.gasLeft = data.gasLeft;
        this.dashboardelecdata.gasElec = data.gasElec;
        this.dashboardelecdata.gasSynGas = data.gasSynGas;
        this.dashboardelecdata.gasU2 = data.gasU2;
        this.dashboardelecdata.gasStyrene = data.gasStyrene;
        // 第二页
        this.dashboardelecdata.hhpPphhp = data.hhpPphhp;
        this.dashboardelecdata.hhpAaae = data.hhpAaae;
        this.dashboardelecdata.hhpGaa = data.hhpGaa;
        this.dashboardelecdata.hhpSyn = data.hhpSyn;
        this.dashboardelecdata.hhpP3802 = data.hhpP3802;
        this.dashboardelecdata.hpLpg = data.hpLpg;
        this.dashboardelecdata.hpSub = data.hpSub;
        this.dashboardelecdata.hpNg = data.hpNg;
        this.dashboardelecdata.hpJ1501 = data.hpJ1501;
        this.dashboardelecdata.hpJ1504In = data.hpJ1504In;
        this.dashboardelecdata.hpJ1504Out = data.hpJ1504Out;
        this.dashboardelecdata.hpUser = data.hpUser;
        this.dashboardelecdata.mpNcipMp = data.mpNcipMp;
        this.dashboardelecdata.mp150511 = data.mp150511;
        this.dashboardelecdata.mp150512 = data.mp150512;
        this.dashboardelecdata.mpPpMp = data.mpPpMp;
        this.dashboardelecdata.mpP9801In = data.mpP9801In;
        this.dashboardelecdata.mpP9801Out = data.mpP9801Out;
        this.dashboardelecdata.mpJ1502 = data.mpJ1502;
        this.dashboardelecdata.mpUser = data.mpUser;
        this.dashboardelecdata.lpPpLp = data.lpPpLp;
        this.dashboardelecdata.lpEmpty = data.lpEmpty;
        this.dashboardelecdata.lpMpLetdown = data.lpMpLetdown;
        this.dashboardelecdata.lpJ1509 = data.lpJ1509;
        this.dashboardelecdata.lpJ1503 = data.lpJ1503;
        this.dashboardelecdata.lpLdpeTs = data.lpLdpeTs;
        this.dashboardelecdata.lpLdpeDm = data.lpLdpeDm;
        this.dashboardelecdata.lpUser = data.lpUser;
        this.dashboardelecdata.bccYpc = data.bccYpc;
        this.dashboardelecdata.bccSyn = data.bccSyn;
        // 第三页
        this.dashboardelecdata.hrsg1SmokeConvert = data.hrsg1SmokeConvert;
        this.dashboardelecdata.hrsg1So2Convert = data.hrsg1So2Convert;
        this.dashboardelecdata.hrsg1NoxConvert = data.hrsg1NoxConvert;
        this.dashboardelecdata.hrsg2SmokeConvert = data.hrsg2SmokeConvert;
        this.dashboardelecdata.hrsg2So2Convert = data.hrsg2So2Convert;
        this.dashboardelecdata.hrsg2NoxConvert = data.hrsg2NoxConvert;
        this.dashboardelecdata.hrsg3SmokeConvert = data.hrsg3SmokeConvert;
        this.dashboardelecdata.hrsg3So2Convert = data.hrsg3So2Convert;
        this.dashboardelecdata.hrsg3NoxConvert = data.hrsg3NoxConvert;
        this.dashboarddata.rainPh = data.rainPh;
        this.dashboarddata.rainCod = data.rainCod;
        this.dashboarddata.wastePh = data.wastePh;
        this.dashboarddata.wasteCod = data.wasteCod;
      });
    },
    /** 查询dashboarddayelec抓取数据列表 */
    getList1()
    {
      selectLast(this.queryParams).then(response => {
        this.dashboardelecdata = response.data;
      });
    },
    /** 查询dashboarddayelec近三十天抓取数据列表 */
    getMonthList1()
    {
      selectMonth(this.queryParams).then(response => {
        this.monthData = response.data;
      });
    },
    /** 查询dashboarddayelec近一周抓取数据列表 */
    getWeekList()
    {
      selectWeek(this.queryParams).then(response => {
        this.weekData = response.data;
      });
    },

    /** 查询dashboarddayelec近49天抓取数据列表 */
    getFiftydayList()
    {
      selecctfiftyday(this.queryParams).then(response => {
        this.fiftydayData = response.data;
      });
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    getScale() {
      let { width, height } = this;
      let wh = window.innerHeight / height;
      let ww = window.innerWidth / width;
      return ww < wh ? ww : wh;
    },
    setScale() {
      if(window.innerHeight ==1080){
        this.height = 1080
      }else{
        this.height = 937

      }
      this.scale = this.getScale();
      if (this.$refs.ScaleBox) {
        this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
      }
    },
    debounce(fn, delay) {
      let delays = delay || 500;
      let timer;
      return function () {
        let th = this;
        let args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(function () {
          timer = null;
          fn.apply(th, args);
        }, delays);
      };
    },
    changeDashboard(val) {
      if (val === 1) {
        this.dashboard = 1
        this.bgCol1="#1a5cd7";
        this.bgCol2="#0f1325";
        this.bgCol3="#0f1325";
      }else if (val === 2) {
        this.dashboard = 2,
        this.bgCol2="#1a5cd7";
        this.bgCol1="#0f1325";
        this.bgCol3="#0f1325";
      }else if (val === 3) {
        this.dashboard = 3,
        this.bgCol3="#1a5cd7";
        this.bgCol1="#0f1325";
        this.bgCol2="#0f1325";
      }

    },
    openNewWindow() {
      let routeData = this.$router.resolve({
        path: "/elecDashboard",
      });
      window.open('/cpms/index.html#/elecDashboard', '_blank');
    },
  }
};

</script>

<style lang="scss">
#elec-index {
  color: #ffffff;
  background-color: #000000;
  width: 100%;
  height: 100vh;
  .bg-elec {
    padding: 0.2rem 0.2rem 0 0.2rem;
    background-size: cover;
    background-position: center center;
    background-image: url("../../../assets/image/elec/bg.jpg");
    height: 100%;
  }

  .host-body {
    .title {
      position: relative;
      width: 6.25rem;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;

      .title-text {
        font-size: 0.4rem;
        position: absolute;
        bottom: 0;
        left: 50%;
        top: 30%;
        transform: translate(-50%);
        font-weight: 600;
      }

      .title-bototm {
        position: absolute;
        bottom: -0.375rem;
        left: 50%;
        transform: translate(-50%);
      }
    }

    // 平行四边形
    .react-left {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.625rem;
      line-height: 0.625rem;
      text-align: center;
      transform: skewX(-45deg);

      .react-after {
        position: absolute;
        right: -0.3125rem;
        top: 0;
        height: 0.625rem;
        width: 0.625rem;
        background-color: #0f1325;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }

    .react-right {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.625rem;
      line-height: 0.625rem;
      text-align: center;
      transform: skewX(45deg);

      .react-before {
        position: relative;
        left: -1.3125rem;
        top: 0;
        height: 0.625rem;
        width: 0.625rem;
        background-color: #0f1325;
        transform: skewX(-45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(-45deg);
      }
    }

    .body-box {
      margin-top: 0.2rem;
      display: flex;
      flex-direction: column;

      //下方区域的布局
      .content-box {
        display: grid;
        grid-template-columns: 6fr 7fr 2fr 2fr;
      }
      // 底部数据
      .bototm-box {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        grid-template-rows: repeat(2,100%);
      }
      .bototm-box1 {
        display: grid;
        grid-template-rows: repeat(2,50%);
      }
      .bototm-box2 {
        display: grid;
        grid-template-columns: repeat(2,50%);
      }
    }
  }
}
#aa{
  position: absolute;
  right: 100px;
}
#bb{
  position: absolute;
  right: 100px;
}
#cc{
  position: absolute;
  right: 80px;
}
.fs-xl {
  font-size: 0.18rem;
}
</style>
