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

<template>
  <div class="app-container">
    <div class="test">

      <div id="container" class="container"></div>
      <div class="tool">
        <el-row>
          <el-col :span="3">
            <div class="toolItem" @click="click1('factoryIntroduction')">
              <img class="icon" src="@/assets/model/model/factoryIntroduction.png"/>
              <div class="grid-content bg-purple">工厂介绍</div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="toolItem" @click="click1('productDistribution')">
              <img class="icon" src="@/assets/model/model/productDistribution.png"/>
              <div class="grid-content bg-purple-light">产品分布</div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="toolItem" @click="click1('dataCentre')">
              <img class="icon" src="@/assets/model/model/dataCentre.png"/>
              <div class="grid-content bg-purple">数据中心</div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="toolItem" @click="click1('live')">
              <img class="icon" src="@/assets/model/model/live.png"/>
              <div class="grid-content bg-purple">现场直播</div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="toolItem" @click="click2()">
              <img class="icon" src="@/assets/model/model/process.png"/>
              <div class="grid-content bg-purple-light">工艺流程</div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="toolItem" @click="click1('production')">
              <img class="icon" src="@/assets/model/model/production.png"/>
              <div class="grid-content bg-purple">生产</div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="toolItem" @click="click1('quality')">
              <img class="icon" src="@/assets/model/model/quality.png"/>
              <div class="grid-content bg-purple-light">质量</div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="toolItem" @click="click1('equipment')">
              <img class="icon" src="@/assets/model/model/equipment.png"/>
              <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>
      <transition name="children">
        <live :exit="exit" v-if="show === 'live'"/>
      </transition>
      <transition name="children">
        <quality :exit="exit" v-if="show === 'quality'"/>
      </transition>
      <transition name="children">
        <equipment :exit="exit" v-if="show === 'equipment'"/>
      </transition>


      <div class="flowChart" v-show="show1">
        <div class="flowItem" v-for="(i,k) in flowItemOptions" @click="setNowFlowIndex(k);toLink(i)"
             :class="nowFlowIndex === k ? 'wireAnimation' : ''"
             :style="`width:${i.width}vw;height:${i.height}vw;top:${i.top}%;left:${i.left}%;background: linear-gradient(to bottom, ${nowFlowIndex === k ? '#00911F': i.bgColor+'99'}, ${nowFlowIndex === k ? '#00370C': i.bgColor});z-index:2;`">
          <span v-html="i.text"></span>
        </div>
        <div class="wire" v-for="i in wireOptions"
             :style="`width:${i.width}vw;height:${i.height}vw;top:${i.top}%;left:${i.left}%;background-color:${i.bgColor};z-index:0;`"></div>
        <div class="wire1" v-for="i in wireOptions1"
             :style="`width:${i.width}vw;height:${i.height}vw;top:${i.top}%;left:${i.left}%;background-color:${i.bgColor};z-index:0;`"></div>
        <div class="arrows" v-for="i in arrowsOptions"
             :style="`top:${i.top}%;left:${i.left}%;z-index:1;`"></div>
        <div class="arrows1"
             style="top: 44.3%;left: 53.7%;z-index: 1;"></div>
      </div>
    </div>
  </div>
</template>

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

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,
    live,
    quality,
    equipment
  },
  data() {
    return {
      viewer: null,
      show: '',
      show1: false,
      nowFlowIndex: null,
      flowItemOptions: [
        // 一层
        {
          top: 2,
          left: 1,
          width: 6,
          height: 4,
          bgColor: '#2f5597',
          text: '内胆<br>自动成型',
          link: '/board/liner',
        },
        {
          top: 2,
          left: 9.3,
          width: 6,
          height: 4,
          bgColor: '#ed7d31',
          text: '内胆预装',
          link: '/board/liner',
        },
        {
          top: 2,
          left: 17.6,
          width: 6,
          height: 4,
          bgColor: '#7f7f7f',
          text: '内胆<br>集存库',
          link: '/board/liner',
        },

        // 二层
        {
          top: 35,
          left: 1,
          width: 6,
          height: 4,
          bgColor: '#2f5597',
          text: '箱壳<br>自动成型',
          link: '/board/caseShell2',
        },
        {
          top: 35,
          left: 9.3,
          width: 6,
          height: 4,
          bgColor: '#ed7d31',
          text: '箱壳预装',
          link: '/board/foaming',
        },
        {
          top: 35,
          left: 17.6,
          width: 6,
          height: 4,
          bgColor: '#7f7f7f',
          text: '箱壳<br>集存库',
          link: '/board/foaming',
        },

        // 一二合
        {
          top: 17,
          left: 25.9,
          width: 6,
          height: 4,
          bgColor: '#f4b183',
          text: '壳胆<br>组装',
          link: '/board/caseShell2',
        },
        {
          top: 17,
          left: 34.2,
          width: 6,
          height: 4,
          bgColor: '#7f7f7f',
          text: '箱体<br>预装',
          link: '/board/caseShell2',
        },
        {
          top: 17,
          left: 42.5,
          width: 6,
          height: 4,
          bgColor: '#00b050',
          text: '箱体<br>发泡',
          link: '/board/foaming',
        },
        {
          top: 17,
          left: 50.8,
          width: 6,
          height: 4,
          bgColor: '#f4b183',
          text: '门体<br>安装',
          link: '/board/foaming2',
        },
        {
          top: 17,
          left: 59.1,
          width: 6,
          height: 4,
          bgColor: '#7f7f7f',
          text: '发泡箱体库',
        },
        {
          top: 17,
          left: 67.4,
          width: 6,
          height: 4,
          bgColor: '#ffc000',
          text: '焊接',
          link: '/board/pourInto',
        },
        {
          top: 17,
          left: 75.7,
          width: 6,
          height: 4,
          bgColor: '#00b050',
          text: '抽空<br>灌注',
          link: '/board/pourInto',
        },
        {
          top: 17,
          left: 84,
          width: 6,
          height: 4,
          bgColor: '#ffc000',
          text: '性能<br>检测',
        },
        {
          top: 17,
          left: 92.3,
          width: 6,
          height: 4,
          bgColor: '#f4b183',
          text: '包装<br>入库',
          link: '/board/scanDown',
        },

        // 三层
        {
          top: 68,
          left: 1,
          width: 6,
          height: 4,
          bgColor: '#2f5597',
          text: '门壳<br>自动成型',
          link: '/board/liner',
        },
        {
          top: 68,
          left: 17.6,
          width: 6,
          height: 4,
          bgColor: '#ed7d31',
          text: '门壳预装',
          link: '/board/liner',
        },
        {
          top: 68,
          left: 34.2,
          width: 6,
          height: 4,
          bgColor: '#00b050',
          text: '门体<br>发泡',
          link: '/board/foaming2',
        },
        {
          top: 68,
          left: 50.8,
          width: 6,
          height: 4,
          bgColor: '#7030a0',
          text: '箱、门<br>匹配输送',
          link: '/board/foaming2',
        }
      ],
      wireOptions: [
        // 一层
        {
          top: 15,
          left: 7,
          width: 2,
          height: 0.25,
          bgColor: '#4472c4',
        },
        {
          top: 15,
          left: 15.3,
          width: 2,
          height: 0.25,
          bgColor: '#4472c4',
        },
        {
          top: 15,
          left: 23.6,
          width: 1,
          height: 0.25,
          bgColor: '#4472c4',
        },

        // 二层
        {
          top: 48,
          left: 7,
          width: 2,
          height: 0.25,
          bgColor: '#4472c4',
        },
        {
          top: 48,
          left: 15.3,
          width: 2,
          height: 0.25,
          bgColor: '#4472c4',
        },
        {
          top: 48,
          left: 23.6,
          width: 1,
          height: 0.25,
          bgColor: '#4472c4',
        },

        // 一二合
        {
          top: 31,
          left: 24.6,
          width: 1,
          height: 0.25,
          bgColor: '#4472c4',
        },
        {
          top: 31,
          left: 31.9,
          width: 2,
          height: 0.25,
          bgColor: '#4472c4',
        },
        {
          top: 31,
          left: 40.2,
          width: 2,
          height: 0.25,
          bgColor: '#4472c4',
        },
        {
          top: 31,
          left: 48.5,
          width: 2,
          height: 0.25,
          bgColor: '#4472c4',
        },
        {
          top: 31,
          left: 56.8,
          width: 2,
          height: 0.25,
          bgColor: '#4472c4',
        },
        {
          top: 31,
          left: 65.1,
          width: 2,
          height: 0.25,
          bgColor: '#4472c4',
        },
        {
          top: 31,
          left: 73.4,
          width: 2,
          height: 0.25,
          bgColor: '#4472c4',
        },
        {
          top: 31,
          left: 81.7,
          width: 2,
          height: 0.25,
          bgColor: '#4472c4',
        },
        {
          top: 31,
          left: 90,
          width: 2,
          height: 0.25,
          bgColor: '#4472c4',
        },

        // 三层
        {
          top: 80,
          left: 7,
          width: 10,
          height: 0.25,
          bgColor: '#4472c4',
        },
        {
          top: 80,
          left: 23.6,
          width: 10,
          height: 0.25,
          bgColor: '#4472c4',
        },
        {
          top: 80,
          left: 40.2,
          width: 10,
          height: 0.25,
          bgColor: '#4472c4',
        },
      ],
      wireOptions1: [
        {
          top: 15,
          left: 24.6,
          width: 0.25,
          height: 5,
          bgColor: '#4472c4',
        },
        {
          top: 46.1,
          left: 54.2,
          width: 0.25,
          height: 3.3,
          bgColor: '#4472c4',
        },
      ],
      arrowsOptions: [

        // 一层
        {
          top: 13,
          left: 8.5,
        },
        {
          top: 13,
          left: 16.8,
        },

        // 二层
        {
          top: 46.3,
          left: 8.5,
        },
        {
          top: 46.3,
          left: 16.8,
        },

        // 一二合
        {
          top: 29.3,
          left: 25.1,
        },
        {
          top: 29.3,
          left: 33.4,
        },
        {
          top: 29.3,
          left: 41.7,
        },
        {
          top: 29.3,
          left: 50,
        },
        {
          top: 29.3,
          left: 58.3,
        },
        {
          top: 29.3,
          left: 66.6,
        },
        {
          top: 29.3,
          left: 74.9,
        },
        {
          top: 29.3,
          left: 83.2,
        },
        {
          top: 29.3,
          left: 91.5,
        },

        // 三层
        {
          top: 78.2,
          left: 16.8,
        },
        {
          top: 78.2,
          left: 33.4,
        },
        {
          top: 78.2,
          left: 50,
        },
      ]
    }
  },
  async mounted() {
    await isAMRT()
    // const param = {
    //   appkey: 'aveMPyNWzDJm',
    //   appsecret: 'rXmhoLAiOPNKzbl7g2qxCV8tFwRdYuZM'
    // }
    const viewer = new AMRT.Viewer('container', {offline: true})
    viewer.sceneManager.setBackground('http://10.100.72.10:8900/docs/img/bg.jpg')

    let num = 0
    let num2 = 0
    let num3 = 0
    let modelArr = [
      'http://10.100.72.10:8900/docs/01-01-01/',
      'http://10.100.72.10:8900/docs/01-01-02/',
      'http://10.100.72.10:8900/docs/01-01-03/',
      'http://10.100.72.10:8900/docs/01-01-04/',
      'http://10.100.72.10:8900/docs/01-01-05/',
      'http://10.100.72.10:8900/docs/01-02-01/',
      'http://10.100.72.10:8900/docs/01-02-02/',
      'http://10.100.72.10:8900/docs/01-02-03/',
      'http://10.100.72.10:8900/docs/01-02-04/',
      'http://10.100.72.10:8900/docs/01-02-05/',
      'http://10.100.72.10:8900/docs/01-02-06/',
      'http://10.100.72.10:8900/docs/01-02-07/',
      'http://10.100.72.10:8900/docs/01-03/',
      'http://10.100.72.10:8900/docs/01-04/',
      'http://10.100.72.10:8900/docs/01changfang/',


      // '1733002676922355712',
      // '1733002653367144448',
      // '1733000805830758400',
      // '1733000710250958848',
      // '1733000650326937600',
      // '1733000643133706240',
      // '1733000491190849536',
      // '1733000457527365632',
      // '1733000436912361472',
      // '1733000276484427776',
      // '1733000223309041664',
      // '1733000212462571520',
      //
      // '1733000038533173248',
      // '1733000034217234432',
      // '1732999987471716352',
      // '1732999849172930560',

      // '1732999837521154048',
      // '1732999828495011840',
      // '1732999786233204736',
      // '1732999740666286080',
      // '1732999667089805312',
      // '1732999638983774208',
      // '1732999634021912576',
      // '1732999618410713088',
      //
      // '1732999607128035328',
      // '1732999597858623488',
      // '1732999559069700096',
      // '1732999554745372672',
      // '1732999550429433856',
      // '1732999507391680512',
      // '1732999493042966528',
      // '1732999471010287616',
      // '1732999442811981824',
      // '1732999424952635392',
      // '1732999411254038528',
      // '1732999390441902080',
      // '1732999384255303680',
      // '1732999376583921664',
      // '1732999305662435328',
      // '1732999305557577728',
      // '1732999301107421184',

      // 1-1
      // '1733052342019952640',
      // '1733052332985421824',
      // '1733052278396555264',
      // '1733052278291697664',
      // '1733052273975758848',
      // '1733052268669964288',
    ]
    let modelArr2 = [
      'http://10.100.72.10:8900/docs/02-01/',
      'http://10.100.72.10:8900/docs/02-01-01/',
      'http://10.100.72.10:8900/docs/02-01-02-01/',
      'http://10.100.72.10:8900/docs/02-01-02-02/',
      'http://10.100.72.10:8900/docs/02-01-03-01/',
      'http://10.100.72.10:8900/docs/02-01-03-02/',
      'http://10.100.72.10:8900/docs/02-02/',
      'http://10.100.72.10:8900/docs/02-02-01/',
      'http://10.100.72.10:8900/docs/02-02-02/',
      'http://10.100.72.10:8900/docs/02-03/',
      'http://10.100.72.10:8900/docs/02-03-1/',
      'http://10.100.72.10:8900/docs/02-04/',
      'http://10.100.72.10:8900/docs/02-04-01-01/',
      'http://10.100.72.10:8900/docs/02-04-01-02/',
      'http://10.100.72.10:8900/docs/02-04-02/',
      'http://10.100.72.10:8900/docs/02-05/',
      'http://10.100.72.10:8900/docs/02changfang/',
    ]
    let modelArr3 = [
      'http://10.100.72.10:8900/docs/03-01-01/',
      'http://10.100.72.10:8900/docs/03-01-02/',
      'http://10.100.72.10:8900/docs/03-02-01/',
      'http://10.100.72.10:8900/docs/03-02-02/',
      'http://10.100.72.10:8900/docs/03-02-03/',
      'http://10.100.72.10:8900/docs/03-02-04/',
      'http://10.100.72.10:8900/docs/03-02-05/',
      'http://10.100.72.10:8900/docs/03-03/',
      'http://10.100.72.10:8900/docs/03-04/',
      'http://10.100.72.10:8900/docs/03-05/',
      'http://10.100.72.10:8900/docs/03-06/',
      'http://10.100.72.10:8900/docs/03-07/',
      'http://10.100.72.10:8900/docs/03-08/',
      'http://10.100.72.10:8900/docs/03-09/',
      'http://10.100.72.10:8900/docs/03-10/',
    ]
    modelArr.forEach(e => {
      viewer.loadModel(e, {
        background: false,
        focus: false,
        id: e,
        offline: true,
        onLoad: function (m) {
          num += 1
          if (num === modelArr.length) {
            modelArr2.forEach(e => {
              viewer.loadModel(e, {
                background: false,
                focus: false,
                id: e,
                offline: true,
                onLoad: function (m) {
                  num2 += 1
                  if (num2 === modelArr2.length) {

                    modelArr3.forEach(e => {
                      viewer.loadModel(e, {
                        background: false,
                        focus: false,
                        id: e,
                        offline: true,
                        onLoad: function (m) {
                          num3 += 1
                          if (num3 === modelArr3.length) {
                            alert('加载完成');
                          }
                          m.on('click', function () {
                          })
                        }
                      })
                    })
                  }
                  m.on('click', function () {
                  })
                }
              })
            })
          }
          m.on('click', function () {
          })
        }
      })
    })
    // viewer.container.addEventListener( 'click', e => {
    //   //通过鼠标拾取模型对象
    //   let object = viewer.picker.intersectObject( e )
    //   if( object ){
    //     console.log( '当前选中模型', object.object )
    //     viewer.operator.restore()
    //     viewer.operator.translucenceOthers(object)
    //     viewer.operator.translucenceOthers(object.object)
    //   }
    // })
    viewer.controls.setTarget(213, -34, -40)
    viewer.controls.setPosition(188, 931, 1443)
    viewer.operator.enabled = true

    setInterval(() => {
      console.log(viewer.controls.getView())

    }, 1000)
    // 灯光
    viewer.sceneManager.setLightness(1)

    // viewer.controls.startAutoRotate(1)
  },
  methods: {
    click1(e) {
      this.show = e
      this.show1 = false
    },
    click2() {
      if (this.show1 === false) {
        this.show1 = true
      } else {
        this.show1 = false
      }
    },
    exit() {
      this.show = ''
    },
    setNowFlowIndex(k) {
      this.nowFlowIndex = k
    },
    toLink(e) {
      e.link && this.$router.push(e.link)
    }
  }
};
</script>
<style lang="less" scoped>

* {
  margin: 0;
  padding: 0
}

.icon {
  width: 2vw;
  margin: 0 auto;
}

.container {
  overflow: hidden;
  background-image: url("../../assets/model/model/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.tool {
  position: absolute;
  width: 60%;
  top: 98%;
  left: 50%;
  transform: translate(-50%, -100%);
  text-align: center;
  font-size: 1vw;
  overflow: hidden;

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

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

.test {
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.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;
  }
}

.flowChart {
  width: 96vw;
  height: 15vw;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: 1%;

  .flowItem {
    position: absolute;
    border-radius: 0.5vw;
    text-align: center;
    color: #fff;
    font-size: 1.05vw;
    border: 0.25vw solid #fff;

    span {
      display: inline-block;
      transform: translate(-50%, -50%);
      position: absolute;
      top: 50%;
      left: 50%;
      width: 90%;
    }
  }

  .wire {
    position: absolute;
    border-radius: 0.15vw;
  }

  .wire1 {
    position: absolute;
    transform: translateX(-100%);
    border-radius: 0.15vw;
  }

  .arrows {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 0.4vw solid transparent;
    border-bottom: 0.4vw solid transparent;
    border-left: 0.8vw solid #4472c4;
  }

  .arrows1 {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 0.4vw solid transparent;
    border-right: 0.4vw solid transparent;
    border-bottom: 0.8vw solid #4472c4;
  }

  .wireAnimation {
    animation: 2s linear 0s infinite normal none running current_winkle;
  }

  @keyframes current_winkle {
    0% {
      border: 0.25vw solid #fff;
    }
    50% {
      border: 0.25vw solid #F70E0E;
    }
    100% {
      border: 0.25vw solid #fff;
    }
  }
}
</style>