guan_client/src/views/modules_guAn/visualization/index.vue

<template>
  <div class="visualization-container">
    <!-- 头部标题区域 -->
    <div class="top-title-container u-flex-jac">
      <div class="title-content">
        <span class="text">高温高湿试验项目</span>
      </div>
    </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">
          <!-- 左中 -->
          <real-time-curve></real-time-curve>
        </div>
        <div class="left-bottom-con">
          <!-- 左下 -->
          <!-- <test-information></test-information> -->
          <full-curve></full-curve>
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="center-container">
        <div class="important">
          <!-- 我是3D区域 -->
          <!-- <div class="u-flex" style="color: #fff;width: 100%; height: 100%;flex-direction: column;align-items: center;">
            <div class="u-flex-cjac" style="width: 100%;">
              <div style="height: 30px;">I机组</div>
              <div class="u-flex-jaa" style="width: 100%;">
                <div>
                  <div class="f1">I1压机吸气：(111) bar</div>
                  <div class="f1">I2压机吸气：(2) bar</div>
                  <div class="f1">J1压机吸气：(11) bar</div>
                  <div class="f1">J1压机排气：() bar</div>
                </div>
                <div>
                  <div class="f1">I2压机排气：(4)bar</div>
                  <div class="f1">J2压机吸气：(0) bar</div>
                  <div class="f1">J2压机排气：() bar</div>
                  <div class="f1">I1压机排气:(33333333333333333333)bar</div>
                </div>
              </div>
            </div>
            <div class="u-flex-cjac" style="width: 100%;">
              <div style="height: 30px;">I机组</div>
              <div class="u-flex-jaa" style="width: 100%;">
                <div>
                  <div class="f1">I1压机吸气：(1111111111) bar</div>
                  <div class="f1">I2压机吸气：(2) bar</div>
                  <div class="f1">J1压机吸气：(11) bar</div>
                  <div class="f1">J1压机排气：() bar</div>
                </div>
                <div>
                  <div class="f1">I2压机排气：(4)bar</div>
                  <div class="f1">J2压机吸气：(0) bar</div>
                  <div class="f1">J2压机排气：() bar</div>
                  <div class="f1">I1压机排气:(33333333333)bar</div>
                </div>
              </div>
            </div>
          </div> -->
        </div>
        <div class="centen-bottom-con u-flex-jab">
          <!-- 中间 -->
          <div class="center-bottom-left">
            <running-state></running-state>
          </div>
          <div class="center-bottom-right">
            <equipment-info></equipment-info>
          </div>
        </div>
      </div>
      <!-- 右侧区域 -->
      <div class="right-container">
        <div class="right-top-con">
          <!-- 右上 -->
          <mode-info></mode-info>
        </div>
        <div class="right-center-con">
          <!-- 右中 -->
          <test-status-info></test-status-info>
        </div>
        <div class="right-bottom-con">
          <!-- 右下 -->
          <surveillance-video></surveillance-video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import YuzhiCurve from './modules/YuzhiCurve.vue'
import RealTimeCurve from './modules/RealTimeCurve.vue'
import FullCurve from './modules/FullCurve.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,
      RealTimeCurve,
      FullCurve,
      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;
    background: url(../../../assets/visualization/pageBg.png) no-repeat;
    background-size: cover;
    // 头部标题区域
    .top-title-container{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      // border: 1px solid #000;
      height: 72px;
      text-align: center;
      // line-height: 22px;
      .title-content{
        width: 700px;
        height: 100%;
        background: url(../../../assets/visualization/pageTitleBg.png) no-repeat center center;
        background-size: auto 100%;
        .text{
          font-size: 28px;
          color: transparent;
          // font-weight: bold;
          // 描边 变相加粗
          -webkit-text-stroke: 0.4px;
          letter-spacing: .15em;
          text-shadow: 1px 2px 2px rgb(10, 37, 92);
          // text-shadow: 1px 2px 2px rgba(10, 68, 134, .67);
          position: relative;
          font-family: "黑体";
          // font-family: "宋体";
          // font-family: serif;
          // font-family: "楷体_GB2312		";
          &::before{
            // content: attr(text); // div中设置了text=>相当于又写了一个标题覆盖在原来设置了阴影的文字上面
            content: '高温高湿试验项目';
            position: absolute;
            z-index: 10;
            background-image: linear-gradient(to bottom, #ffffff, #8DD4F7);
            // background-image: linear-gradient(to bottom, #ffffff, #7ed7fb);
            -webkit-background-clip: text;
            color: transparent;
            // 去除集成父级样式
            text-shadow: none;
          }
        }
      }
    }
    // 数据内容区域
    .content-container{
      height: 100%;
      padding: 60px 20px 20px;
      box-sizing: border-box;
      .left-container{
        width: 25%;
        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{
        width: 50%;
        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.4;
            height: 100%;
          }
          .center-bottom-right{
            flex: 1;
            height: 100%;
            padding-left: 12px;
          }
        }
      }
      .right-container{
        width: 25%;
        .right-top-con{
          height: 35%;
          padding-bottom: 12px;
        }
        .right-center-con{
          height: 35%;
          padding-bottom: 12px;
        }
        .right-bottom-con{
          height: 30%;
        }
      }
    }
  }
</style>