<template>
  <div
    class="big-v1-wrap"
    id="big-v1-wrap-id"
    :style="{
          'transformOrigin':'center top',
          'transform':`scale(${scalseNum},${scalseNum})`,
          '-webkit-transform':`scale(${scalseNum},${scalseNum})`,
          '-moz-transform':`scale(${scalseNum},${scalseNum})`,
          '-o-transform':`scale(${scalseNum},${scalseNum})`,
          '-ms-transform':`scale(${scalseNum},${scalseNum})`
      }"
  >
    <div class="main-block">
      <head-wrap
        ref="mainHead"
        :handelTile="title"
        :projectList="projectList"
        @eventFullscreen="eventFullscreen"
        @eventProjectId="eventProjectId"
        @eventRegionalismId="eventRegionalismId"
      ></head-wrap>
      <div class="count-wrap">
        <div class="count-left">
          <div class="left-block-1">
            <device-proportion-wrap :projectId="projectId"></device-proportion-wrap>
            <wraring-info-wrap :result="alarmInfoResult"></wraring-info-wrap>
          </div>
          <div class="map-block-1" :style="userLoginType !=='PERSONAL'?'':''">
            <map-wrap
              v-if="userLoginType !=='PERSONAL'"
              tempUserType="userLoginType"
              :fullscreen="fullscreen"
              :countResult="alarmInfoResult"
              @eventFullscreen="eventFullscreenMap"
              :projectList="projectList"
            ></map-wrap>
            <map-wrap-personal
              v-else
              :fullscreen="fullscreen"
              tempUserType="userLoginType"
              :countResult="alarmInfoResult"
              @eventFullscreen="eventFullscreenMap"
              :projectList="projectList"
            ></map-wrap-personal>
          </div>
          <div class="bottom-block-1">
            <alarm-table-list-wrap :projectId="projectId"></alarm-table-list-wrap>
          </div>
        </div>
        <div class="right-block-1">
          <today-ratio-wrap :result="resultInfo.warningAnalysisStatisticsVo || []"></today-ratio-wrap>
          <type-distribution-wrap :result="resultInfo.alarmCategoriesList || []"></type-distribution-wrap>
          <trend-wrap :result="resultInfo.alarmChartDataVo || []"></trend-wrap>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeadWrap from "./profile/head";
import DeviceProportionWrap from "./profile/deviceProportion";
import WraringInfoWrap from "./profile/wraringInfo";
import AlarmTableListWrap from "./profile/alarmTableList";
import TodayRatioWrap from "./profile/todayRatio";
import TypeDistributionWrap from "./profile/typeDistribution";
import trendWrap from "./profile/trend";
import MapWrap from "./profile/mapWrap";
import MapWrapPersonal from "./profile/personalCenter";
import { iotWebSocketAlarmBaseUrl } from "@/config/env";

import { getWarningAnalysis, homeCount, appProjectList } from "@/api/app";
export default {
  name: "Device_oneself",
  components: {
    HeadWrap,
    DeviceProportionWrap,
    WraringInfoWrap,
    AlarmTableListWrap,
    TodayRatioWrap,
    TypeDistributionWrap,
    trendWrap,
    MapWrap,
    MapWrapPersonal
  },
  data() {
    return {
      title: "智慧能源综合管理系统",
      scalseNum: 1,
      resultInfo: {},
      alarmInfoResult: {},
      projectList: [],
      projectId: null,
      regionalismId: null,
      fullscreen: false,
      thisScrollTopY: 0,
      userLoginType: "",
      stompClient: null,
      socket_flag: true
    };
  },
  mounted() {
    // 计算缩放比例
    this.resize_window();
    this.userLoginType = this.$store.getters.userType;
    this.thisScrollTopY = document.getElementById("con_lf_top_div").scrollTop;
    document.getElementById("con_lf_top_div").style.background = "#010a31";
    document.getElementById("con_lf_top_div").style.height =
      "calc(100vh - 0px)";
     document.getElementById("con_lf_top_div").style.minHeight =
      "calc(100vh - 0px)";
    document.getElementById("con_lf_top_div").style.overflow = "hidden";
    document.getElementById("con_lf_top_div").scrollTop = 0;
    window.addEventListener("resize", () => {
      this.resize_window();
    });
  },
  watch: {
    $route(to, from) {
      if (from.fullPath === '/index'){
        document.getElementById("con_lf_top_div").style.background = "#fff";
      } else if (to.fullPath === '/index') {
        document.getElementById("con_lf_top_div").style.background = "#010a31";
      }
    }
  },
  created() {
    document.getElementById("app").style.background = "#010a31";
    this.getProjectList();
    this.warningAnalysisList();
    this.homeCount();
    this.connection();
  },

  methods: {
    // 创建一个ws 监听获取报警实时数据
    connection() {
      if (this.stompClient) {
        return;
      }
      if (!iotWebSocketAlarmBaseUrl) {
        return;
      }
      this.stompClient = new WebSocket(`${iotWebSocketAlarmBaseUrl}`);
      this.stompClient.onmessage = this.socket_onmsg;
      this.stompClient.onclose = this.socket_onclose;
    },
    socket_onmsg(evt) {
      console.log("wsljcg:=", evt);
    },
    socket_onclose(e) {
      this.stompClient = null;
      if (this.socket_flag) {
        this.socket_flag = false;
        let _this = this;
        setTimeout(function() {
          _this.socket_flag = true;
          _this.connection();
        }, 10000);
      }
    },
    // 跳转路由是关闭全屏状态
    eventFullscreenMap(data) {
      this.fullscreen = data.value;
      this.$refs.mainHead["fullscreen"] = data.value;
    },
    // 全屏或者关闭 返回状态
    eventFullscreen(data) {
      this.fullscreen = data.value;
    },
    eventProjectId(data) {
      this.projectId = data;
      this.homeCount();
      this.warningAnalysisList();
    },
    eventRegionalismId(data) {
      this.regionalismId = data;
      this.getProjectList();
    },
    resize_window() {
      var w_height = 0;
      if (this.fullscreen) {
        w_height = Number(document.documentElement.clientHeight / 1080);
      } else {
        w_height = Number(document.documentElement.clientHeight / 1080);
      }
      this.scalseNum = w_height;
    },
    // 查询项目列表
    getProjectList() {
      if (this.$store.getters.userType !== 'PERSONAL') {
         appProjectList({
          regionalismId: this.regionalismId
        }).then(response => {
          this.projectList = response.data;
        });
      }
    },
    // 查询警情信息
    homeCount() {
      homeCount({
        alarmDivide: "ALARM",
        projectId: this.projectId
      }).then(res => {
        this.alarmInfoResult = res.data;
      });
    },
    // 查询获取告警分析等数据
    warningAnalysisList() {
      getWarningAnalysis({
        projectId: this.projectId
      }).then(res => {
        this.resultInfo = res.data;
      });
    }
  },
  destroyed() {
    document.getElementById("app").style.background = "#fff";
    document.getElementById("con_lf_top_div").style.background = "#fff";
    document.getElementById("con_lf_top_div").style.overflow = "auto";
    document.getElementById("con_lf_top_div").scrollTop = this.thisScrollTopY;
  }
};
</script>
<style lang="scss">
.big-v1-wrap {
  width: 100%;
  height: calc(100vh - 0px);
  display: flex;
  justify-content: center;
  background-image: url("../../../assets/images/big/bigpg_v2.jpg");
  cursor: default;
  .main-block {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    .count-wrap {
      width: 100%;
      height: calc(100% - 65px);
      display: flex;
      flex-wrap: wrap;
      color: #fff;
      background: #1531f508;
      .count-left {
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 400px);
        height: calc(100%);
        padding-left: 20px;
        .left-block-1 {
          width: 400px;
          height: calc(100% - 300px);
        }
        .map-block-1 {
          width: calc(100% - 420px);
          height: calc(100% - 300px);
        }

        .bottom-block-1 {
          width: calc(100% - 20px);
          height: 300px;
        }
      }
      .right-block-1 {
        width: 400px;
        height: calc(100%);
        position: relative;
        left: -20px;
      }
    }
  }
}
.app-main {
  width: 100%;
  height: calc(100vh - 0);
  // background: #021c80;
}
.big-v1-wrap {
  width: 1920px;
  height: 1080px;
  transform-origin: center top 0px;
  position: relative;
  left: 50%;
  margin-left: -960px;
}
</style>

