font-end/src/views/largeScreen/ProductionCommandCenter3.vue

<!-- 4096*2160版本 6个图表 iframe作为背景-->
<script>
import PieChart from './components/PieChart.vue'
import BarChart from './components/BarChart.vue'
import ElectrodeConsumption from './components/ElectrodeConsumption.vue'

export default {
  components: {
    PieChart,
    BarChart,
    ElectrodeConsumption
  },
  methods: {
    getItemStyle(item) {
      return {
        backgroundImage: `url(${require('@/assets/big-screen/nav/' + item + '.png')})`,
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center'
      }
    }
  }
}
</script>

<template>
  <div class="main-container">
    <div class="top-container"></div>

    <div class="center-container">
      <iframe width="100%" height="100%" src="http://127.0.0.1:10000/"></iframe>
    </div>

    <div class="left-container">
      <div class="container-content">

        <div class="container-content-top">
          <div class="title-box yunxingzhuangtai"></div>
          <div class="box-container">
            <div class="line-item bg">
              <div class="lint-item-title">本月累计产量</div>
              <div class="icon"><img src="@/assets/big-screen/icon-chanliang.png" alt="" /><</div>
              <div class="value">432,928<span class="unit">t</span></div>
              <div class="end-time">截止到8-20</div>
            </div>
            <div class="line-item bg">
              <div class="lint-item-title">产品回收率</div>
              <div style="width: 100%; height: calc(100% - 60px);">
                <PieChart></PieChart>
              </div>
            </div>
            <div class="line-item bg">
              <div class="lint-item-title">炉温稳定率</div>
              <div style="width: 100%; height: calc(100% - 60px);">
                <PieChart></PieChart>
              </div>
            </div>
          </div>

          <div class="title-box chanliang"></div>
          <div class="box-container title">
            <div class="line-item">
              <div class="lint-item-title">硅锰合计</div>
            </div>
            <div class="line-item">
              <div class="lint-item-title">铬铁合计</div>
            </div>
            <div class="line-item">
              <div class="lint-item-title">硅铁合计</div>
            </div>
          </div>
          <div class="box-container title-box">
            <div class="line-item bg"></div>
            <div class="line-item bg"></div>
            <div class="line-item bg"></div>
          </div>
        </div>

        <div class="container-content-bottom">
          <div class="chart-container luwenwendinglv">
            <div class="title-chart-box luwenwendinglv"></div>
            <div class="chart-box-container" style="width: 100%; height: calc(100% - 8rem);">
              <BarChart></BarChart>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="right-container">
      <div class="container-content" style="display: flex;">

        <div class="left">
          <div class="container-content-top">
            <div class="title-box xiaohaoshuju"></div>
            <div class="box-container">
              <div class="line-item">1</div>
              <div class="line-item">2</div>
              <div class="line-item">3</div>
            </div>

            <div class="chart-container danweidianhao">
              <div class="title-chart-box danweidianhao"></div>
              <div class="chart-box-container" style="width: 100%; height: calc(100% - 8rem);">
                <!-- <LineChart></LineChart> -->
                <ElectrodeConsumption></ElectrodeConsumption>
              </div>
            </div>
          </div>

          <div class="container-content-bottom">
            <div class="title-box anquanjiance"></div>

            <div class="chart-container anquanjiance">
              <div>
                <div>2022-11-23 11:37:25</div>
                <div>Ⅱ级 xxxx段发生严重xx，请立即前往处理!</div>
              </div>
              <div>
                <div>2022-11-23 09:37:25</div>
                <div>Ⅱ级 xxxx段发生严重xx，请立即前往处理!</div>
              </div>
            </div>
          </div>
        </div>

        <div class="right">
          <div
            class="luzi-item"
            v-for="item in 14"
            :key="item"
            :style="getItemStyle(item)"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.bg-image-mixin(@image-path) {
  background-image: url(@image-path);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.lint-item-title {
  color: #40a9ff;
  font-size: 2rem;
}
.line-item {
  width: 32%;
  height: 100%;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  &.bg, .bg {
    .bg-image-mixin('~@/assets/big-screen/bg-line-item.png');
  }
}
.main-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('~@/assets/big-screen/bg-main.png');
  background-size: 100% 100%;
  .top-container {
    position: absolute;
    z-index: 30;
    top: 0;
    width: 100%;
    height: 7%;
    background-image: url('~@/assets/big-screen/bg-title.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .center-container {
    position: absolute;
    z-index: 20;
    width: 36%;
    height: 100%;
    left: 50%;
    margin-left: -18%;
  }
  .left-container, .right-container {
    position: absolute;
    z-index: 20;
    width: 36%;
    height: 100%;
    background-image: url('~@/assets/big-screen/bg-right.png');
    background-size: 100% 100%;
    background-position: right;
    background-repeat: no-repeat;
    right: 0;
    .container-content {
      width: 90%;
      height: 91%;
      margin: 7% 5% 2%;
      background-image: url('~@/assets/big-screen/bg-border-right.png');
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: right;
      .container-content-top, .container-content-bottom {
        width: 100%;
        padding-left: 9%;
        padding-right: 5%;
      }
      .container-content-top {
        height: 60%;
        padding-top: 3rem;
      }
      .container-content-bottom {
        height: 40%;
      }
    }
    .title-chart-box {
      height: 3rem;
      margin: 2rem 3rem;
      background-repeat: no-repeat;
      &.luwenwendinglv {
        background-image: url('~@/assets/big-screen/title-wendinglv.png');
      }
      &.danweidianhao {
        background-image: url('~@/assets/big-screen/title-danweidianhao.png');
      }
    }
    .title-box {
      width: 100%;
      height: 6rem;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-bottom: 3rem;
      &.anquanjiance {
        background-image: url('~@/assets/big-screen/title-anquanjiance.png');
      }
      &.chanliang {
        background-image: url('~@/assets/big-screen/title-chanliang.png');
      }
      &.xiaohaoshuju {
        background-image: url('~@/assets/big-screen/title-xiaohaoshuju.png');
      }
      &.yunxingzhuangtai {
        background-image: url('~@/assets/big-screen/title-yunxingzhuangtai.png');
      }
    }
    .box-container {
      width: 100%;
      height: 30%;
      display: flex;
      justify-content: space-between;
      &.title {
        height: 5rem;
      }
    }
    .chart-container {
      width: 100%;
      margin-bottom: 3rem;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .title-chart-box {
      }
      &.luwenwendinglv {
        padding-top: 0.5rem;
        height: 94%;
        background-image: url('~@/assets/big-screen/border-wendinglv.png');
        .chart-box-container {
          width: 100%;
          height: 100%;
        }
      }
      &.danweidianhao {
        padding-top: 0.5rem;
        height: 40%;
        background-image: url('~@/assets/big-screen/border-danweidianhao.png');
      }
      &.anquanjiance {
        height: 77%;
        background-image: url('~@/assets/big-screen/border-anquanjiance.png');
      }
    }
  }
  .right-container {
    .container-content {
      background: none;
      margin-right: 15px;
      width: 100%;
      .left, .right {
        height: 100%;
        display: inline-block;
      }
      .left {
        width: 70%;
      }
      .right {
        width: 26%;
      }
      .left {
        background-image: url('~@/assets/big-screen/bg-border-right.png');
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: right;
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .luzi-item {
          width: 90%;
          margin: 0 6% 0 2%;
          height: 3rem;
        }
      }
    }
  }
  .left-container {
    background-image: url('~@/assets/big-screen/bg-left.png');
    left: 0;
    background-position: left;
    .container-content {
      background-image: url('~@/assets/big-screen/bg-border-left.png');
      background-position: left;
      .container-content-top, .container-content-bottom {
        padding-left: 5%;
        padding-right: 9%;
      }
      .container-content-top {
        height: 75%;
      }
      .container-content-bottom {
        height: 25%;
      }
    }
  }
}
</style>