<!-- 4096*2160版本 6个图表 iframe作为背景-->
<script>
import ProductData from './components/ProductData.vue'
import Production from './components/Production.vue'
import ProductQualityRate from './components/ProductQualityRate.vue'
import FurnaceTemperatureStability from './components/FurnaceTemperatureStability.vue'
import UnitPowerConsumption from './components/UnitPowerConsumption.vue'
import PowerUsage from './components/PowerUsage.vue'

export default {
  components: {
    ProductData,
    Production,
    ProductQualityRate,
    FurnaceTemperatureStability,
    UnitPowerConsumption,
    PowerUsage
  }
}
</script>

<template>
  <div class="main">
    <div id="middleTitle" class="middleTitle">
      <!-- <div class="cockpit"><div class="cockpitFont">驾驶舱</div></div>
      <div class="branchPlantProCap"><div class="branchPlantProCapFont">分厂产能</div></div> -->
      <div class="middleTitleFont"><img src="@/assets/title.png" alt="" /></div>
      <!-- <div class="productionEfficiency"><div class="productionEfficiencyFont">生产效能</div></div>
      <div class="safetyManagement"><div class="safetyManagementFont">安全管理</div></div> -->
    </div>
    <div class="operatingStatusBox">
      <div class="operatingStatus1">
        <iframe width="100%" height="100%" src="https://e.baidu.com/?refer=50008978"></iframe>
      </div>
      <div class="operatingStatus left">
        <div class="operatingStatusFont">工厂整体运行状态</div>
        <div class="operatingStatusContent">
          <div class="contentBox">
            <div class="contentBoxFont">
              <img src="@/assets/Component 1.svg" alt="" />
            </div>
            <div class="contentBoxCont">
              <product-data></product-data>
            </div>
          </div>
          <div class="contentBox">
            <div class="contentBoxFont">
              <img src="@/assets/Component 6.svg" alt="" />
              <span>单位：t</span>
            </div>
            <div class="contentBoxCont">
              <production></production>
            </div>
          </div>
          <div class="contentBox">
            <div class="contentBoxFont">
              <img src="@/assets/Component 8.svg" alt="" />
              <span>百分比</span>
            </div>
            <div class="contentBoxCont">
              <div class="contentBoxCont">
                <product-quality-rate></product-quality-rate>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="operatingStatus right">
        <div class="operatingStatusFont">能耗与电耗分析</div>
        <div class="operatingStatusContent">
          <div class="contentBox">
            <div class="contentBoxFont">
              <img src="@/assets/Component 12.svg" alt="" />
            </div>
            <div class="contentBoxCont">
              <PowerUsage />
            </div>
          </div>
          <div class="contentBox">
            <div class="contentBoxFont">
              <img src="@/assets/Component 13.svg" alt="" />
              <span>单位：kWh/t</span>
            </div>
            <div class="contentBoxCont">
              <div class="contentBoxCont">
                <UnitPowerConsumption />
              </div>
            </div>
          </div>
          <div class="contentBox">
            <div class="contentBoxFont">
              <img src="@/assets/Component 5.svg" alt="" />
            </div>
            <div class="contentBoxCont">
              <div class="contentBoxCont">
                <furnace-temperature-stability></furnace-temperature-stability>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.main {
  position: relative;
  width: 256rem; // 416 * 0.615
  height: 135rem; // 114.1875 * 1.154
  background: radial-gradient(50% 50% at 50% 50%, #0f3b8c 0%, #0e357e 33.17%, #041026 100%);
}
.middleTitle {
  position: relative;
  z-index: 9999;
  width: 256rem; // 415.8125 * 0.615
  height: 11.77rem; // 10.19919 * 1.154
  flex-shrink: 0;
  padding-top: 16px; // 33.81 * 1.154
  display: inline-block;
  background-image: url('~@/assets/title1.svg');
  background-size: auto 72%;
  background-repeat: no-repeat;
  background-position: top center;
}
.middleTitleFont {
  text-align: center;
  text-shadow: 0 3.47px 8.68px #010a14; // 3.008 * 1.154, 7.519 * 1.154
  font-family: 'DingTalk JinBuTi';
  font-size: 4.33rem; // 3.75 * 1.154
  font-style: normal;
  font-weight: 400;
  line-height: 4.33rem; // 3.75 * 1.154
  letter-spacing: 0.87rem; // 0.75 * 1.154

  background: linear-gradient(180deg, #fff 0%, #96dbf2 66.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cockpit {
  width: 15.97rem; // 25.96338 * 0.615
  height: 5.55rem; // 4.8125 * 1.154
  flex-shrink: 0;
  margin-left: 41.77rem; // 67.92 * 0.615
  background-image: url('~@/assets/Group 2785.svg');
}
.cockpitFont {
  text-align: center;
  text-shadow: 0 3.47px 8.68px #010a14;
  font-family: 'DingTalk JinBuTi';
  font-size: 3.25rem; // 2.8125 * 1.154
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.87rem;

  background: linear-gradient(180deg, #fff 0%, #dff7ff 66.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.branchPlantProCap {
  width: 15.97rem;
  height: 5.55rem;
  flex-shrink: 0;
  margin-left: 57.84rem; // 94.04 * 0.615
  background-image: url('~@/assets/Group 2789.png');
}
.branchPlantProCapFont {
  text-align: center;
  text-shadow: 0 3.47px 8.68px #010a14;
  font-family: 'DingTalk JinBuTi';
  font-size: 3.25rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.87rem;

  background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.productionEfficiency {
  width: 16.03rem; // 26.0625 * 0.615
  height: 5.55rem;
  flex-shrink: 0;
  margin-left: 182.04rem; // 296 * 0.615
  background-image: url('~@/assets/Group 2790.svg');
}
.productionEfficiencyFont {
  text-align: center;
  text-shadow: 0 3.47px 8.68px #010a14;
  font-family: 'DingTalk JinBuTi';
  font-size: 3.25rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.87rem;

  background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.safetyManagement {
  width: 16.03rem;
  height: 5.55rem;
  flex-shrink: 0;
  margin-left: 198.03rem; // 322 * 0.615
  background-image: url('~@/assets/Group 2791.svg');
}
.safetyManagementFont {
  text-align: center;
  text-shadow: 0 3.47px 8.68px #010a14;
  font-family: 'DingTalk JinBuTi';
  font-size: 3.25rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.87rem;

  background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.operatingStatus1 {
  position: absolute;
  z-index: 1;
  width: 100%; // 2236 * 0.615
  height: calc(100% - 11.77rem); // 1217 * 1.154
  top: 11.77rem; // 10.19919 * 1.154
  left: 0;
}
.operatingStatusFont {
  color: #fff;
  font-family: 'DingTalk JinBuTi';
  font-size: 2.16rem; // 1.8745 * 1.154
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
  letter-spacing: 0.43rem; // 0.37488 * 1.154
  height: 4.04rem; // 3.5 * 1.154
  flex-shrink: 0;
  background-image: url('~@/assets/Group 1142814701.svg');
}
.operatingStatusBox {
  // position: relative;
  // display: flex;
  // justify-content: space-between;
  // margin: 0px 100px; // 215 * 0.615
}
.operatingStatus {
  position: absolute;
  z-index: 9999;
  width: 900px; // 941 * 0.615
  top: 11.77rem;
  margin-top: 5rem;
  &.left {
    left: 100px;
  }
  &.right {
    right: 100px;
  }
}
.operatingStatusContent {
  display: flex;
  flex-direction: column;
  height: 1500px; // 1300 * 1.154
  justify-content: space-around;
  .contentBox {
    width: 900px; // 936 * 0.615
    height: 410px; // 343 * 1.154
    flex-shrink: 0;
    .contentBoxFont {
      overflow: hidden;
      position: relative;
      span {
        position: absolute;
        z-index: 99;
        right: 0; // 335 * 0.615
        top: 10px; // 9 * 1.154
        font-family: 'DingTalk JinBuTi';
        font-style: italic;
        font-weight: 400;
        font-size: 17px; // 15 * 1.154
        line-height: 150%;
        text-align: center;
        letter-spacing: 0.2em;
        color: #60f2ff;
        &.half {
          right: 0;
        }
      }
    }
    .contentBoxCont {
      background: linear-gradient(126.97deg, rgba(6, 11, 40, 0.74) 28.26%, rgba(10, 14, 35, 0.71) 91.2%);
      border: 0.94px solid #3675c9;
      height: 380px; // 298 * 1.154
    }
  }
  .contentBox1{
    display: flex;
    justify-content: space-between;
    > div {
      width: 49%;
    }
  }
}
</style>
