zs_aucma-mes-ui/src/views/model/model.vue

<template>
  <div class="app-container">
    <div id="container" class="container"></div>
    <div class="tool">
      <el-row>
        <el-col :span="3">
          <div class="toolItem" @click="click1('factoryIntroduction')">
            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
            <div class="grid-content bg-purple">工厂介绍</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="toolItem" @click="click1('productDistribution')">
            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
            <div class="grid-content bg-purple-light">产品分布</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="toolItem" @click="click1('dataCentre')">
            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
            <div class="grid-content bg-purple">数据中心</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="toolItem" @click="click1('现场直播')">
            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
            <div class="grid-content bg-purple">现场直播</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="toolItem" @click="click1('工艺流程')">
            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
            <div class="grid-content bg-purple-light">工艺流程</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="toolItem" @click="click1('production')">
            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
            <div class="grid-content bg-purple">生产</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="toolItem" @click="click1('质量')">
            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
            <div class="grid-content bg-purple-light">质量</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="toolItem" @click="click1('厂房视角')">
            <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
            <div class="grid-content bg-purple-light">设备</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <transition name="children">
      <factory-introduction :exit="exit" v-if="show === 'factoryIntroduction'"/>
    </transition>
    <transition name="children">
      <product-distribution :exit="exit" v-if="show === 'productDistribution'"/>
    </transition>
    <transition name="children">
      <data-centre :exit="exit" v-if="show === 'dataCentre'"/>
    </transition>
    <transition name="children">
      <production :exit="exit" v-if="show === 'production'"/>
    </transition>
  </div>
</template>

<script>
import factoryIntroduction from './factoryIntroduction'
import productDistribution from './productDistribution'
import dataCentre from './dataCentre'
import production from './production'

const isAMRT = () => {
  return new Promise((resolve, reject) => {
    const fun = () => {
      if (typeof AMRT !== "undefined" && AMRT) {
        resolve(true)
      } else {
        setTimeout(fun, 100)
      }
    }
    fun()
  })
}

export default {
  name: "Model",
  components: {
    factoryIntroduction,
    productDistribution,
    dataCentre,
    production
  },
  data() {
    return {
      viewer: null,
      show: '',
    }
  },
  async mounted() {
    await isAMRT()
    const param = {
      appkey: 'aveMPyNWzDJm',
      appsecret: 'rXmhoLAiOPNKzbl7g2qxCV8tFwRdYuZM'
    }
    const viewer = new AMRT.Viewer('container', param)
    console.log(AMRT)
    let num = 0
    let modelArr = [
      // '1720315475507941376',
      // '1720315479907766272',
      // '1720315484513112064',
      // '1720315500866703360',
      // '1720315558030872576',
      // '1720315596551360512',
      // '1720315644550975488',
      // '1720315648946606080',
      // '1720315687114772480',
      // '1720315691422322688',
      // '1720315722275622912',
      // '1720315729129115648',
      // '1720315768454909952',
      // '1720316275214913536',
      // '1720316297822212096',
    ]
    modelArr.forEach(e => {
      let model = viewer.loadModel(e, {
        background: false,
        focus: false,
        id: e,
        onLoad: function (m) {
          num += 1
          if (num === modelArr.length) {
            alert('加载完成');
          }
          m.on('click', function () {
            // console.log(this)
            // console.log(m)
            // let clickModel = model.getObjectById(this)
            // console.log(clickModel)
            // alert(`${e}`)
            // viewer.operator.restore()
            // viewer.operator.translucenceOthers(this.viewer)
          })
        }
      })
    })
    viewer.controls.setTarget(26.3, -19.8, -82)
    viewer.controls.setPosition(31, 1721, 584)
    viewer.operator.enabled = true

    // viewer.controls.startAutoRotate(1)
  },
  methods: {
    click1(e) {
      this.show = e
    },
    exit() {
      this.show = ''
    }
  }
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0
}

.container {
  width: 100vw;
  height: 100vh
}

.tool {
  position: absolute;
  width: 60%;
  height: 20vh;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 1vw;

  .toolItem:hover {
    transform: scale(1.2);
  }
}

.app-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.children-enter-active {
  animation: children-in 1s;
}

.children-leave-active {
  animation: children-in 1s reverse;
}

@keyframes children-in {
  0% {
    opacity: 0;
    left: -100%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
</style>