<template>
  <div class="monitor" v-loading="loading">
    <div class="monitor-top">
      <img
        class="title-left"
        src="../../../assets/images/title-left.png"
        alt=""
      />
      <img
        class="title-center"
        src="../../../assets/images/title-center.png"
        alt=""
      />
      <img
        class="title-right"
        src="../../../assets/images/title-right.png"
        alt=""
      />
      <div class="sys-title" @click="goSys">铭汉高效冷源站管理系统</div>
      <!-- logo -->
      <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
      <div class="nowTime">{{ formattedDate }}</div>
      <div class="monitor-time">已监测时长:{{ dayData }}天</div>
      <img
        class="icon_warning"
        src="../../../assets/images/warning.png"
        title="报警记录"
        @click="goWarning"
        v-if="isShowWarning"
        alt=""
      />
      <img
        class="icon_home"
        src="../../../assets/images/icon_home.png"
        title="首页"
        @click="goSys"
        alt=""
      />
      <img
        class="back-icon"
        src="../../../assets/images/back-icon.png"
        title="返回"
        @click="goBack"
        alt=""
      />
    </div>
    <div class="host-detail">
      <div class="detail-top">
        <div class="detail-top-left">
          <div class="host-li">
            <img
              class="host-img"
              src="../../../assets/images/host-img4.png"
              alt=""
            />
            <div class="host-name">1号螺旋机</div>
            <div class="detail-data hostparams">
              <div class="detail-data-top">
                <title-img></title-img>
                <div class="details-title">冷机性能</div>
                <title-img></title-img>
              </div>
              <div class="detail-data-bottom">
                <div class="detail-data-li">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>实时EER:</span>
                      <span class="dotData">10.365</span>
                      <span class="dotUnit">kw/kw</span>
                    </div>
                  </div>
                </div>
                <div class="detail-data-li">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>实时功率:</span>
                      <span class="dotData">126</span>
                      <span class="dotUnit">kw</span>
                    </div>
                  </div>
                </div>
                <div class="detail-data-li">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>实时冷量:</span>
                      <span class="dotData">1306</span>
                      <span class="dotUnit">kw</span>
                    </div>
                  </div>
                </div>
                <div class="detail-data-li year-data">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>全年EER:</span>
                      <span class="dotData">0.000</span>
                      <span class="dotUnit">kw/kw</span>
                    </div>
                  </div>
                </div>
                <div class="detail-data-li">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>全年用电:</span>
                      <span class="dotData">64098</span>
                      <span class="dotUnit">kw/H</span>
                    </div>
                  </div>
                </div>
                <div class="detail-data-li">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>全年供电:</span>
                      <span class="dotData">101365</span>
                      <span class="dotUnit">kw</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="host-li">
            <img
              class="host-img"
              src="../../../assets/images/host-img4.png"
              alt=""
            />
            <div class="host-name">2号螺旋机</div>
            <div class="detail-data hostparams">
              <div class="detail-data-top">
                <title-img></title-img>
                <div class="details-title">冷机性能</div>
                <title-img></title-img>
              </div>
              <div class="detail-data-bottom">
                <div class="detail-data-li">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>实时EER:</span>
                      <span class="dotData">10.365</span>
                      <span class="dotUnit">kw/kw</span>
                    </div>
                  </div>
                </div>
                <div class="detail-data-li">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>实时功率:</span>
                      <span class="dotData">126</span>
                      <span class="dotUnit">kw</span>
                    </div>
                  </div>
                </div>
                <div class="detail-data-li">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>实时冷量:</span>
                      <span class="dotData">1306</span>
                      <span class="dotUnit">kw</span>
                    </div>
                  </div>
                </div>
                <div class="detail-data-li year-data">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>全年EER:</span>
                      <span class="dotData">0.000</span>
                      <span class="dotUnit">kw/kw</span>
                    </div>
                  </div>
                </div>
                <div class="detail-data-li">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>全年用电:</span>
                      <span class="dotData">64098</span>
                      <span class="dotUnit">kw/H</span>
                    </div>
                  </div>
                </div>
                <div class="detail-data-li">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>全年供电:</span>
                      <span class="dotData">101365</span>
                      <span class="dotUnit">kw</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="host-li">
            <img
              class="host-img"
              src="../../../assets/images/host-img3.png"
              alt=""
            />
            <div class="host-name">3号磁悬浮机</div>
            <div class="detail-data hostparams">
              <div class="detail-data-top">
                <title-img></title-img>
                <div class="details-title">冷机性能</div>
                <title-img></title-img>
              </div>
              <div class="detail-data-bottom">
                <div class="detail-data-li">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>实时EER:</span>
                      <span class="dotData">10.365</span>
                      <span class="dotUnit">kw/kw</span>
                    </div>
                  </div>
                </div>
                <div class="detail-data-li">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>实时功率:</span>
                      <span class="dotData">126</span>
                      <span class="dotUnit">kw</span>
                    </div>
                  </div>
                </div>
                <div class="detail-data-li">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>实时冷量:</span>
                      <span class="dotData">1306</span>
                      <span class="dotUnit">kw</span>
                    </div>
                  </div>
                </div>
                <div class="detail-data-li year-data">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>全年EER:</span>
                      <span class="dotData">0.000</span>
                      <span class="dotUnit">kw/kw</span>
                    </div>
                  </div>
                </div>
                <div class="detail-data-li">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>全年用电:</span>
                      <span class="dotData">64098</span>
                      <span class="dotUnit">kw/H</span>
                    </div>
                  </div>
                </div>
                <div class="detail-data-li">
                  <div class="rightDot">
                    <div class="leftDot">
                      <span>全年供电:</span>
                      <span class="dotData">101365</span>
                      <span class="dotUnit">kw</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-top-right">
          <div class="detail-data hostparams">
            <div class="detail-data-top">
              <title-img></title-img>
              <div class="details-title">系统性能</div>
              <title-img></title-img>
            </div>
            <div class="detail-data-bottom">
              <div class="detail-data-li">
                <div class="rightDot">
                  <div class="leftDot">
                    <span>今日EER:</span>
                    <span class="dotData">6.531</span>
                    <span class="dotUnit">kw/kw</span>
                  </div>
                </div>
              </div>
              <div class="detail-data-li">
                <div class="rightDot">
                  <div class="leftDot">
                    <span>今日用电:</span>
                    <span class="dotData">367</span>
                    <span class="dotUnit">kw/H</span>
                  </div>
                </div>
              </div>
              <div class="detail-data-li">
                <div class="rightDot">
                  <div class="leftDot">
                    <span>今日供冷:</span>
                    <span class="dotData">2397</span>
                    <span class="dotUnit">kw</span>
                  </div>
                </div>
              </div>
              <div class="detail-data-li year-data">
                <div class="rightDot">
                  <div class="leftDot">
                    <span>当月EER:</span>
                    <span class="dotData">6.131</span>
                    <span class="dotUnit">kw/kw</span>
                  </div>
                </div>
              </div>
              <div class="detail-data-li">
                <div class="rightDot">
                  <div class="leftDot">
                    <span>今月用电:</span>
                    <span class="dotData">27840</span>
                    <span class="dotUnit">kw/H</span>
                  </div>
                </div>
              </div>
              <div class="detail-data-li">
                <div class="rightDot">
                  <div class="leftDot">
                    <span>当月供冷:</span>
                    <span class="dotData">172069</span>
                    <span class="dotUnit">kw</span>
                  </div>
                </div>
              </div>
              <div class="detail-data-li year-data">
                <div class="rightDot">
                  <div class="leftDot">
                    <span>当年EER:</span>
                    <span class="dotData">6.531</span>
                    <span class="dotUnit">kw/kw</span>
                  </div>
                </div>
              </div>
              <div class="detail-data-li">
                <div class="rightDot">
                  <div class="leftDot">
                    <span>当年用电:</span>
                    <span class="dotData">105771</span>
                    <span class="dotUnit">kw/H</span>
                  </div>
                </div>
              </div>
              <div class="detail-data-li">
                <div class="rightDot">
                  <div class="leftDot">
                    <span>当年供冷:</span>
                    <span class="dotData">744519</span>
                    <span class="dotUnit">kw</span>
                  </div>
                </div>
              </div>
              <div class="detail-data-li year-data">
                <div class="rightDot">
                  <div class="leftDot">
                    <span class="dotTitle">累计EER:</span>
                    <span class="dotData">5.531</span>
                    <span class="dotUnit">kw/kw</span>
                  </div>
                </div>
              </div>
              <div class="detail-data-li">
                <div class="rightDot">
                  <div class="leftDot">
                    <span class="dotTitle">累计用电:</span>
                    <span class="dotData">1096628</span>
                    <span class="dotUnit">kw/H</span>
                  </div>
                </div>
              </div>
              <div class="detail-data-li">
                <div class="rightDot">
                  <div class="leftDot">
                    <span class="dotTitle">累计供冷:</span>
                    <span class="dotData">6107983</span>
                    <span class="dotUnit">kw</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-bottom">
        <performance-chart :temArray="temArray"></performance-chart>
      </div>
    </div>
  </div>
</template>

<script>
import {
  hostDetailsData,
  hostTemData,
  runTime,
} from "@/api/centerairC/sysMonitor";
import { alarmRecordList } from "@/api/alarm/alarmRecord";
import titleImg from "./components/titleImg.vue";
import { format } from "@/utils/datetime";
import PerformanceChart from "./components/performanceChart.vue";
export default {
  name: "sysControl",
  components: { titleImg, PerformanceChart },
  data() {
    return {
      loading: false,

      currentDate: new Date(),
      nowTimer: null,
      deviceName: "", //主机名称
      hostData: [], //冷机性能
      rightHostData: [], //右
      automaticObj: {}, //手自动状态
      localObj: {}, //本地远程状态
      badObj: {}, //故障状态
      timeObj: {}, //累计运行时间
      compressorData: [], //压缩机参数
      temArray: [], //冷冻冷却水温度
      isMagnetic: false,
      isShowWarning: false, //是否有报警
      dayData: "", //监测天数
    };
  },
  computed: {
    formattedDate() {
      const year = this.currentDate.getFullYear();
      const month = String(this.currentDate.getMonth() + 1).padStart(2, "0");
      const day = String(this.currentDate.getDate()).padStart(2, "0");
      const hours = String(this.currentDate.getHours()).padStart(2, "0");
      const minutes = String(this.currentDate.getMinutes()).padStart(2, "0");
      const seconds = String(this.currentDate.getSeconds()).padStart(2, "0");
      const weekDays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const weekDay = weekDays[this.currentDate.getDay()];
      return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
    },
  },
  created() {},
  mounted() {
    this.getHostDetailsData();
    this.getDayData();
    // 在组件挂载后尝试进入全屏
    setTimeout(() => {
      this.requestFullscreen();
    }, 100); // 延迟 100 毫秒执行全屏操作
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.nowTimer) {
      clearInterval(this.nowTimer);
    }
  },
  methods: {
    // 全屏操作
    requestFullscreen() {
      const element = document.documentElement;
      console.log("全屏了吗");
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        // Firefox
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        // Chrome, Safari and Opera
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        // IE/Edge
        element.msRequestFullscreen();
      }
    },
    // 退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        // Firefox
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        // Chrome, Safari and Opera
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        // IE/Edge
        document.msExitFullscreen();
      }
    },
    // 进入系统首页
    goSys() {
      // this.exitFullscreen();
      this.$router.push("/");
    },
    // 返回上一页
    goBack() {
      this.$router.back();
    },
    getHostDetailsData() {
      // 请求数据
      // this.getHostParams(deviceLedgerId);
    },
    // 监测天数
    getDayData() {
      runTime().then((res) => {
        if (res.code == 200) {
          this.dayData = res.data.runTime;
        }
      });
    },
    // 报警列表
    getAlarnStatus() {
      let data = {
        pageNum: 1,
        pageSize: 10,
        status: "0",
      };
      let timeArr = [getDay(0), getDay(0)];
      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
        if (res.code == 200 && res.rows.length > 0) {
          this.isShowWarning = true;
        } else {
          this.isShowWarning = false;
        }
      });
    },
    goWarning() {
      // this.exitFullscreen();
      this.$router.push("/alarm/alarmRecord");
    },
  },
};
</script>

<style lang="scss" scoped>
.monitor {
  width: 100%;
  min-height: 100vh;
  height: auto;
  background-color: black;
  color: #fff;
  .monitor-top {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0.1rem 0.2rem;
    position: relative;
    .title-left {
      width: 3.41rem;
      height: 0.8rem;
    }
    .title-center {
      width: 9.46rem;
      height: 0.69rem;
    }
    .title-right {
      width: 5.04rem;
      height: 0.78rem;
    }
    .sys-title {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.28rem;
      color: #ffffff;
      font-weight: bold;
      z-index: 100;
      cursor: pointer;
    }
    .nowTime {
      position: absolute;
      top: 0.37rem;
      right: 0.6rem;
      font-size: 0.18rem;
      color: #ffffff;
      font-weight: bold;
      z-index: 100;
    }
    .sys-logo {
      width: 1.8rem;
      height: 0.5rem;
      position: absolute;
      top: 0.26rem;
      left: 0.8rem;
      z-index: 10;
    }
    .monitor-time {
      position: absolute;
      top: 0.44rem;
      left: 4.2rem;
      z-index: 10;
      font-size: 0.18rem;
      color: #ffffff;
      font-weight: bold;
    }
    .icon_warning {
      position: absolute;
      top: 0.39rem;
      right: 4.4rem;
      z-index: 10;
      width: 0.35rem;
      height: 0.32rem;
      margin: 0 0.25rem 0 0.27rem;
      cursor: pointer;
      /* 添加闪烁动画 */
      animation: blink 1s infinite;
    }
    @keyframes blink {
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
    }
    .icon_home {
      position: absolute;
      top: 0.39rem;
      right: 4rem;
      z-index: 10;
      width: 0.35rem;
      height: 0.32rem;
      margin: 0 0.2rem 0 0.27rem;
      cursor: pointer;
    }
    .back-icon {
      position: absolute;
      top: 0.39rem;
      right: 3.7rem;
      z-index: 10;
      width: 0.35rem;
      height: 0.32rem;
      cursor: pointer;
    }
  }
  .host-detail {
    padding: 0.2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    .detail-top {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .detail-top-left {
        width: 14rem;
        // background-color: aquamarine;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        .host-li {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-left: 0.3rem;
          position: relative;
          .host-img {
            width: 3.5rem;
            height: 2.6rem;
            margin-bottom: 0.1rem;
          }
          .host-name {
            position: absolute;
            top: 0.8rem;
            left: 1.6rem;
            color: #3520f8;
            font-size: 0.18rem;
            font-weight: bold;
          }
        }
      }
      .detail-top-right {
        width: calc(100% - 14rem);
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .detail-data {
        display: flex;
        flex-direction: column;
        width: 4.5rem;
        position: relative;
        .detail-data-top {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          color: #c0dffc;
          font-weight: bold;
          font-size: 0.18rem;
          width: 100%;
          text-align: center;
          z-index: 10;
          .details-title {
            margin: 0 0.15rem;
          }
        }
        .detail-data-bottom {
          width: 100%;
          padding: 0rem 0.3rem;
          z-index: 0;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: flex-start;
          justify-content: center;
        }
        .line1 {
          position: absolute;
          top: 0.53rem;
        }
      }
    }
    .detail-bottom {
      // margin: 0.3rem 0.5rem 0 0.5rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 3rem;
      // background-color: #217df5;
    }
  }
}
</style>
