<template>
  <div class="visualization-container">
    <!-- 头部标题区域 -->
    <div class="top-title-container">
      项目
    </div>
    <!-- 数据内容区域 -->
    <div class="content-container u-flex">
      <!-- 左侧区域 -->
      <div class="left-container">
        <div class="left-top-con">
          <!-- 左上 -->
          <yuzhi-curve></yuzhi-curve>
        </div>
        <div class="left-center-con">
          <!-- 左中 -->
          <data-curve></data-curve>
        </div>
        <div class="left-bottom-con">
          <!-- 左下 -->
          <running-state></running-state>
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="center-container">
        <div class="important">
          我是3D区域
        </div>
        <div class="centen-bottom-con u-flex-jab">
          <!-- 中间 -->
          <div class="center-bottom-left">
            <test-information></test-information>
          </div>
          <div class="center-bottom-right">
            <test-status-info></test-status-info>
          </div>
        </div>
      </div>
      <!-- 右侧区域 -->
      <div class="right-container">
        <div class="right-top-con">
          <!-- 右上 -->
          <equipment-info></equipment-info>
        </div>
        <div class="right-center-con">
          <!-- 右中 -->
          <mode-info></mode-info>
        </div>
        <div class="right-bottom-con">
          <!-- 右下 -->
          <surveillance-video></surveillance-video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DataCurve from './modules/DataCurve.vue'
import YuzhiCurve from './modules/YuzhiCurve.vue'
import RunningState from './modules/RunningState.vue'
import EquipmentInfo from './modules/EquipmentInfo.vue'
import ModeInfo from './modules/ModeInfo.vue'
import SurveillanceVideo from './modules/SurveillanceVideo.vue'
import TestInformation from './modules/TestInformation.vue'
import TestStatusInfo from './modules/TestStatusInfo.vue'

export default {
    name: '',
    components: {
      YuzhiCurve,
      DataCurve,
      RunningState,
      EquipmentInfo,
      ModeInfo,
      SurveillanceVideo,
      TestInformation,
      TestStatusInfo,
    },
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style scoped>
  @import '~@assets/less/uStyle.less';
</style>
<style lang="less">
  .visualization-container{
    width: 100%;
    height: 100vh;
    // 头部标题区域
    .top-title-container{
      position: fixed;
      top: 0;
      left: 35%;
      right: 35%;
      border: 1px solid #000;
      height: 70px;
      text-align: center;
      line-height: 70px;
    }
    // 数据内容区域
    .content-container{
      height: 100%;
      padding: 60px 20px 20px;
      box-sizing: border-box;
      .left-container{
        flex: 1;
        height: 100%;
        .left-top-con{
          height: 35%;
          padding-bottom: 12px;
        }
        .left-center-con{
          height: 35%;
          padding-bottom: 12px;
        }
        .left-bottom-con{
          height: 30%;
        }
      }
      .center-container{
        flex: 1.8;
        height: 100%;
        .important{
          width: 100%;
          height: 70%;
          text-align: center;
          line-height: 500px;
        }
        .centen-bottom-con{
          height: 30%;
          padding: 0 12px;
          .center-bottom-left{
            flex: 1;
            height: 100%;
          }
          .center-bottom-right{
            flex: 1.2;
            height: 100%;
            padding-left: 12px;
          }
        }
      }
      .right-container{
        flex: 1;
        .right-top-con{
          height: 35%;
          padding-bottom: 12px;
        }
        .right-center-con{
          height: 35%;
          padding-bottom: 12px;
        }
        .right-bottom-con{
          height: 30%;
        }
      }
    }
  }
</style>
