11-mes-new/src/views/3DOverview/index.vue

<template>
  <div id="v3d-outter" ref="v3d-outter">
    <!-- <V3DApp @3d-loaded="handle3DLoaded" /> -->
    <!-- 正式内容: -->
    <!-- <div v-if="showPage" id="v3d-main-content"> -->
    <div v-if="true" id="v3d-main-content">
      <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />

      <section id="techy-body-part">
        <div class="upper-part">
          <div class="techy-body-part__left">
            <techy-container title="订单完成情况" style="flex: 0;">
              <LeftContentOrder />
            </techy-container>
            <techy-container title="公用工程消耗" style="flex:1;">
              <LeftContentPublicConsume />
            </techy-container>
          </div>

          <div class="techy-body-part__middle">
            <TechyBox>
              <div class="flex">
                <p>
                  <b>产线名称 :</b>
                  <span>A产线</span>
                </p>
                <p>
                  <b>设备名称 :</b>
                  <span>清洗机</span>
                </p>
                <p>
                  <b>累计加工数量 :</b>
                  <span>20</span>
                </p>
                <p>
                  <b>通信状态 :</b>
                  <span class="round-dot">运行中</span>
                </p>
              </div>
            </TechyBox>
          </div>

          <div class="techy-body-part__right">
            <techy-container title="实时产量和能耗" style="height: 22vh">
              <RightContentRealtimeProduction />
            </techy-container>

            <techy-container title="工序质量分析" style="flex: 0">
              <RightContentQualityAnalysis />
            </techy-container>

            <techy-container title="产线成品率" style="flex: 1">
              <RightContentProductRate />
            </techy-container>
          </div>
        </div>

        <!-- 底部 -->
        <div class="bottom-part">
          <div style="width: 25%; min-width: 480px; height: 100%;">
            <techy-container title="设备巡检提示" style="flex: 0; align-self: stretch;">
              <LeftContentEquipmentCheck />
            </techy-container>
          </div>
          <div>
            <techy-container title="现场实时监控">
              <LeftContentMonitor />
            </techy-container>
          </div>
          <div style="flex: 1;">
            <techy-container title="缺陷分类分析">
              <RightContentFaultAnalysis />
            </techy-container>
          </div>
          <div style="width: 25%; min-width: 480px;">
            <techy-container title="设备报警提示">
              <RightContentAlert />
            </techy-container>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import V3DApp from './components/V3DApp.vue'
import TechyHeader from './components/TechyHeader.vue'
import TechyContainer from './components/TechyContainer.vue'
import LeftContentMonitor from './components/LeftContentMonitor.vue'
import LeftContentEquipmentCheck from './components/LeftContentEquipmentCheck.vue'
import LeftContentOrder from './components/LeftContentOrder.vue'
import LeftContentPublicConsume from './components/LeftContentPublicConsume.vue'
import RightContentAlert from './components/RightContentAlert.vue'
import RightContentRealtimeProduction from './components/RightContentRealtimeProduction.vue'
import RightContentProductRate from './components/RightContentProductRate.vue'
import RightContentQualityAnalysis from './components/RightContentQualityAnalysis.vue'
import RightContentFaultAnalysis from './components/RightContentFaultAnalysis.vue'
import TechyBox from './components/TechyBox.vue'

import screenfull from 'screenfull'

export default {
  name: '',
  components: {
    V3DApp,
    TechyHeader,
    TechyContainer,
    LeftContentMonitor,
    LeftContentEquipmentCheck,
    LeftContentOrder,
    LeftContentPublicConsume,
    RightContentAlert,
    RightContentRealtimeProduction,
    RightContentProductRate,
    RightContentQualityAnalysis,
    RightContentFaultAnalysis,
    TechyBox
  },
  data() {
    return {
      showPage: false,
      toggleResize: 'toggle-1' // <=== no need to worry this
    }
  },
  provide() {
    return { resizeStatus: () => this.toggleResize }
  },
  created() {},
  mounted() {},
  methods: {
    /** 全屏切换 */
    toggleFullScreen() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle(this.$refs['v3d-outter'])
      this.toggleResize = this.toggleResize === 'toggle-1' ? 'toggle-2' : 'toggle-1'
    },
    handle3DLoaded() {
      this.showPage = true
    }
  }
}
</script>

<style>
#v3d-outter {
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/img/cockpit/cockpit-back.png');
  background-size: cover;
  background-position: center;
  font: 14px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
  color: #4d4d4d;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
  position: relative;
}

#v3d-main-content {
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 3;
  display: flex;
  flex-direction: column;
  font: initial;
}

#techy-body-part {
  flex: 1 1;
  display: flex;
  /* gap: 16px; */
  gap: calc(100vmin / 1920 * 36);
  flex-direction: column;
}

.upper-part {
  flex: 1 1;
  padding: calc(100vmin / 1920 * 36);
  padding-bottom: 0;
  display: flex;
  justify-content: space-between;
}

.bottom-part {
  height: 22vh;
  padding: 0 calc(100vmin / 1920 * 36) calc(100vmin / 1920 * 36);
  display: flex;
  /* gap: 16px; */
  gap: calc(100vmin / 1920 * 36);
}

.techy-body-part__left,
.techy-body-part__right {
  height: 100%;
  width: 25%;
  min-width: 480px;
  overflow: hidden;
  /* background: rgba(20, 69, 100, 0.425);
  backdrop-filter: blur(2px); */

  display: flex;
  flex-direction: column;
  gap: calc(100vmin / 1920 * 36);
}

/* .techy-body-part__left {
  width: 35%;
} */

.techy-body-part__right-col-2 {
  flex: 1;
  display: flex;
  gap: calc(100vmin / 1920 * 36);
}

.techy-body-part__middle {
  position: absolute;
  top: 12%;
  left: 36%;
  height: 96px;
  width: 128px;
}

.flex {
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.flex p {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
}

.flex p > span {
  position: relative;
  padding-left: 6px;
}
.round-dot::before {
  content: '';
  position: absolute;
  top: 5px;
  left: -3px;
  width: 8px;
  height: 8px;
  background-color: rgb(82, 231, 82);
  border-radius: 4px;
}
</style>