<template>
  <div class="preview">
    <div class="real-header">
      <previewHeader />
    </div>
    <div class="preview-main-container">
      <!-- 左 -->
      <div class="preview-left">
        <div class="row1">
          <qyjbqk title="企业基本情况" />
        </div>

        <div class="row2">
          <cssbtj title="场所设备统计" />
        </div>

        <!-- 环境统计 -->
        <div class="row3">
          <hjtj title="环境统计" />
        </div>
        <div class="row4">
          <gltj />
        </div>
      </div>

      <!-- 中 -->
      <div class="preview-center">
        <div class="center-top">
          <centertop />
        </div>

        <!-- 地图 -->
        <div class="center-center-map">
          <centerCenterMap />
        </div>
        <div class="center-bottom">
          <div class="center-bottom-left fxgk">
            <!-- 风险管控 -->
            <fxgk />
          </div>
          <div class="center-bottom-right">
            <!-- 隐患治理 -->
            <yhzl />
          </div>

        </div>
      </div>

      <!-- 右 安全告/预警 -->
      <div class="preview-right">
        <aqgyj />
      </div>
    </div>

    <img class="preview-back-pic" :src="getImgUrl('preview/priviewBackground.png')" alt="">
  </div>
</template>

<script setup>
import { ref } from 'vue';
import previewHeader from './com/header/index.vue'; // 头部
import qyjbqk from './com/qyjbqk/index.vue'; // 企业基本情况
import cssbtj from './com/cssbtj/index.vue'; // 场所设备统计
import hjtj from './com/hjtj/index.vue'; // 环境统计
import gltj from './com/gltj/index.vue'; // 管理统计
import aqgyj from './com/aqgyj/index.vue'; // 安全告/预警
import centertop from './com/centertop/index.vue'
import fxgk from './com/fxgk/index.vue'; // 风险管控
import yhzl from './com/yhzl/index.vue'; // 隐患治理
import centerCenterMap from './com/centerCenterMap/index.vue'
import { getImgUrl } from "@/utils/tools.js"
</script>

<style lang="scss" scoped>
.preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  color: #ccc;
  .real-header {
    width: 100vw;
    height: 6.4vh;
  }

  .preview-main-container {
    display: flex;
    justify-content: space-between;
    padding: 0.5vw;

    .preview-left {
      width: 24.5vw;
      height: 92.6vh;

      .row1,
      .row2,
      .row3,
      .row4 {
        height: 23.5vh;
        padding: 0.25vw;
      }
    }

    .preview-center {
      width: 49vw;
      height: 92.6vh;

      .center-top {
        height: 4.63vh;
      }

      .center-center-map {
        height: 63.8vh;
        margin-top: 1vh;
      }

      .center-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 1.6vh;
      }
    }

    .preview-right {
      width: 24.5vw;
      height: 92.6vh;
    }
  }
}

.preview-back-pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
</style>
