You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
778 lines
17 KiB
Vue
778 lines
17 KiB
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)"
|
|
: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>自动成型'
|
|
},
|
|
{
|
|
top: 2,
|
|
left: 9.3,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#ed7d31',
|
|
text: '内胆预装'
|
|
},
|
|
{
|
|
top: 2,
|
|
left: 17.6,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#7f7f7f',
|
|
text: '内胆<br>集存库'
|
|
},
|
|
|
|
// 二层
|
|
{
|
|
top: 35,
|
|
left: 1,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#2f5597',
|
|
text: '箱壳<br>自动成型'
|
|
},
|
|
{
|
|
top: 35,
|
|
left: 9.3,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#ed7d31',
|
|
text: '箱壳预装'
|
|
},
|
|
{
|
|
top: 35,
|
|
left: 17.6,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#7f7f7f',
|
|
text: '箱壳<br>集存库'
|
|
},
|
|
|
|
// 一二合
|
|
{
|
|
top: 17,
|
|
left: 25.9,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#f4b183',
|
|
text: '壳胆<br>组装'
|
|
},
|
|
{
|
|
top: 17,
|
|
left: 34.2,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#7f7f7f',
|
|
text: '箱体<br>预装'
|
|
},
|
|
{
|
|
top: 17,
|
|
left: 42.5,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#00b050',
|
|
text: '箱体<br>发泡'
|
|
},
|
|
{
|
|
top: 17,
|
|
left: 50.8,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#f4b183',
|
|
text: '门体<br>安装'
|
|
},
|
|
{
|
|
top: 17,
|
|
left: 59.1,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#7f7f7f',
|
|
text: '发泡箱体库'
|
|
},
|
|
{
|
|
top: 17,
|
|
left: 67.4,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#ffc000',
|
|
text: '焊接'
|
|
},
|
|
{
|
|
top: 17,
|
|
left: 75.7,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#00b050',
|
|
text: '抽空<br>灌注'
|
|
},
|
|
{
|
|
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>入库'
|
|
},
|
|
|
|
// 三层
|
|
{
|
|
top: 68,
|
|
left: 1,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#2f5597',
|
|
text: '门壳<br>自动成型'
|
|
},
|
|
{
|
|
top: 68,
|
|
left: 17.6,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#ed7d31',
|
|
text: '门壳预装'
|
|
},
|
|
{
|
|
top: 68,
|
|
left: 34.2,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#00b050',
|
|
text: '门体<br>发泡'
|
|
},
|
|
{
|
|
top: 68,
|
|
left: 50.8,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#7030a0',
|
|
text: '箱、门<br>匹配输送'
|
|
}
|
|
],
|
|
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', param)
|
|
let num = 0
|
|
let modelArr = [
|
|
// '1720315475507941376',
|
|
// '1720315479907766272',
|
|
// '1720315484513112064',
|
|
// '1720315500866703360',
|
|
// '1720315558030872576',
|
|
// '1720315596551360512',
|
|
// '1720315644550975488',
|
|
// '1720315648946606080',
|
|
// '1720315687114772480',
|
|
// '1720315691422322688',
|
|
// '1720315722275622912',
|
|
// '1720315729129115648',
|
|
// '1720315768454909952',
|
|
// '1720316275214913536',
|
|
// '1720316297822212096',
|
|
|
|
// 1层
|
|
// '1720315722275622912',
|
|
// '1730411915198468096',
|
|
// '1730411998006611968',
|
|
// '1730411963659456512',
|
|
// '1730411959351906304',
|
|
// '1730412014314065920',
|
|
// '1730412039731548160',
|
|
// '1730412073898348544',
|
|
|
|
// '1730412084799344640',
|
|
// '1730412196258779136',
|
|
// '1730412089115283456',
|
|
// '1730412127476387840',
|
|
// '1730412170082127872',
|
|
// '1730434866786471936',
|
|
// '1730434916656746496',
|
|
// '1730412271693336576',
|
|
// '1730412211886755840',
|
|
|
|
// 1-1
|
|
// '1730417328874721280',
|
|
// '1730423530752970752',
|
|
|
|
// 2层
|
|
// '1730417324571365376',
|
|
// '1730417333178077184',
|
|
// '1730417383941738496',
|
|
// '1730417407748608000',
|
|
// '1730420842472542208',
|
|
// '1730420816044232704',
|
|
]
|
|
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(m)
|
|
console.log(e)
|
|
console.log(m.getObjectById)
|
|
})
|
|
}
|
|
})
|
|
})
|
|
// 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(26.3, -19.8, -82)
|
|
viewer.controls.setPosition(31, 1721, 584)
|
|
viewer.operator.enabled = true
|
|
|
|
// 灯光
|
|
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
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
* {
|
|
margin: 0;
|
|
padding: 0
|
|
}
|
|
|
|
.icon {
|
|
width:2vw;
|
|
margin:0 auto ;
|
|
}
|
|
|
|
.container {
|
|
width: 100vw;
|
|
height: 33.33vw;
|
|
//height: 100vh;
|
|
}
|
|
|
|
.tool {
|
|
position: absolute;
|
|
width: 60%;
|
|
top: 98%;
|
|
left: 50%;
|
|
transform: translate(-50%, -100%);
|
|
text-align: center;
|
|
font-size: 1vw;
|
|
|
|
.toolItem:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
|
|
.app-container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.test {
|
|
//top: 20%;
|
|
width: 100vw;
|
|
height: 33.33vw;
|
|
//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>
|