<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-03-06 10:05:04
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-03-27 16:26:15
 * @FilePath: \yuan-huoling-browser\src\views\screen\situationScreen.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useTitle } from "@vueuse/core";
import Header from "./components/Header.vue";
import BlockCom from "./components/BlockCom.vue";
import CenterTop from "./components/CenterTop.vue";
import hostAssetsChange from "./components/hostAssetsChange.vue";
import portChange from "./components/portChange.vue";
const scaleWidth = ref(1);
const scaleHeight = ref(1);
useTitle("资产态势大屏");
const resize = () => {
  scaleWidth.value = window.innerWidth / 1920;
  scaleHeight.value = window.innerHeight / 1080;
};
resize();
onMounted(() => {
  window.addEventListener("resize", resize);
  document.body.classList.add("situationScreen");
});
onUnmounted(() => {
  window.removeEventListener("resize", resize);
  document.body.classList.remove("situationScreen");
});
</script>

<template>
  <div
    class="custom-screen-container"
    :style="'transform: scale(' + scaleWidth + ', ' + scaleHeight + ')'"
  >
    <Header></Header>
    <div class="custom-screen-content">
      <div class="left">
        <BlockCom name="AssetsStatistics"></BlockCom>
        <BlockCom name="AssetTypeDistribution"></BlockCom>
        <BlockCom name="operatingSystemTypeAndNumberStatistics"></BlockCom>
      </div>
      <div class="center">
        <CenterTop></CenterTop>
        <hostAssetsChange></hostAssetsChange>
        <portChange></portChange>
      </div>
      <div class="right">
        <BlockCom name="openPortNum"></BlockCom>
        <BlockCom name="openServeNum"></BlockCom>
        <BlockCom name="componentTypeTop5"></BlockCom>
      </div>
    </div>
  </div>
</template>
<style>
#app {
  overflow: auto;
}
</style>
<style lang="scss" scoped>
::v-deep .el-dialog {
  margin: 0;
}
::v-deep .el-overlay {
  background: rgba(0, 0, 0, 0.7);
  .el-overlay-dialog {
    position: static;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.custom-screen-container {
  display: flex;
  width: 1920px;
  height: 1080px;
  background-size: 100% 100%;
  flex-direction: column;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  transform-origin: left top;
  z-index: 99;
  min-height: 100vh;
  background: url("../../assets/image/screen/icon-screen.png") no-repeat;

  .custom-screen-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow: hidden;
    flex: 1;
    padding-bottom: 73px;
    box-sizing: border-box;
    .left {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      position: relative;
      z-index: 10;
      box-sizing: border-box;
      width: 385px;
      justify-content: space-between;
      margin-left: 83px;
      box-sizing: border-box;
    }

    .center {
      padding: 0px 64px 0px 75px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      flex-shrink: 0;
      width: 0;
      align-items: center;
      justify-content: space-between;
    }

    .right {
      width: 385px;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      justify-content: space-between;
      margin-right: 83px;
      box-sizing: border-box;
      z-index: 0;
    }
  }
}
</style>
