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.
1094 lines
24 KiB
Vue
1094 lines
24 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="test">
|
|
|
|
<div id="container" class="container"></div>
|
|
<div class="titleBg"></div>
|
|
<div class="headTitle">河南澳柯玛智能制造中心</div>
|
|
<div class="time" id="time">{{ time }}</div>
|
|
<div class="date" id="date">{{ date }}</div>
|
|
<div class="logo"></div>
|
|
<div class="tool">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<div class="toolItem" @click="click1('companyIntroduction')">
|
|
<img class="icon" src="@/assets/model/model/companyIntroduction.png"/>
|
|
<div class="whiteSpan grid-content bg-purple">公司介绍</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<div class="toolItem" @click="click1('factoryIntroduction')">
|
|
<img class="icon" src="@/assets/model/model/factoryIntroduction.png"/>
|
|
<div class="whiteSpan grid-content bg-purple">工厂介绍</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<div class="toolItem" @click="click1('dataCentre')">
|
|
<img class="icon" src="@/assets/model/model/dataCentre.png"/>
|
|
<div class="whiteSpan grid-content bg-purple">大数据中心</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<div class="toolItem" @click="click2()">
|
|
<img class="icon" src="@/assets/model/model/process.png"/>
|
|
<div class="whiteSpan grid-content bg-purple-light">工艺流程</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="toolItem" @click="click1('live')">
|
|
<img class="icon" src="@/assets/model/model/live.png"/>
|
|
<div class="whiteSpan grid-content bg-purple">现场直播</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="whiteSpan 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="whiteSpan 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="whiteSpan grid-content bg-purple-light">设备</div>-->
|
|
<!-- </div>-->
|
|
<!-- </el-col>-->
|
|
</el-row>
|
|
</div>
|
|
|
|
<transition name="children">
|
|
<companyIntroduction :exit="exit" v-if="show === 'companyIntroduction'"/>
|
|
</transition>
|
|
<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>
|
|
|
|
|
|
<transition name="children">
|
|
<boardIndex :exit="exit" v-if="show === 'board'" :params="params"/>
|
|
</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 companyIntroduction from './companyIntroduction'
|
|
import productDistribution from './productDistribution'
|
|
import dataCentre from './dataCentre'
|
|
import production from './production'
|
|
import live from './live'
|
|
import quality from './quality'
|
|
import equipment from './equipment'
|
|
import boardIndex from './boardIndex'
|
|
|
|
let getDateIntervalFun = null
|
|
let isClickLink = null
|
|
let clickLinkTime = null
|
|
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,
|
|
companyIntroduction,
|
|
productDistribution,
|
|
dataCentre,
|
|
production,
|
|
live,
|
|
quality,
|
|
equipment,
|
|
boardIndex
|
|
},
|
|
data() {
|
|
return {
|
|
time: '',
|
|
date: '',
|
|
params: '',
|
|
viewer: null,
|
|
show: '',
|
|
show1: false,
|
|
nowFlowIndex: null,
|
|
flowItemOptions: [
|
|
// 一层
|
|
{
|
|
top: 2,
|
|
left: 1,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#2f5597',
|
|
text: '内胆<br>自动成型',
|
|
link: 'liner',
|
|
},
|
|
{
|
|
top: 2,
|
|
left: 9.3,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#ed7d31',
|
|
text: '内胆预装',
|
|
link: 'liner',
|
|
},
|
|
{
|
|
top: 2,
|
|
left: 17.6,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#7f7f7f',
|
|
text: '内胆<br>集存库',
|
|
link: 'liner',
|
|
},
|
|
|
|
// 二层
|
|
{
|
|
top: 35,
|
|
left: 1,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#2f5597',
|
|
text: '箱壳<br>自动成型',
|
|
link: 'caseShell',
|
|
},
|
|
{
|
|
top: 35,
|
|
left: 9.3,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#ed7d31',
|
|
text: '箱壳预装',
|
|
link: 'foaming',
|
|
},
|
|
{
|
|
top: 35,
|
|
left: 17.6,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#7f7f7f',
|
|
text: '箱壳<br>集存库',
|
|
link: 'foaming',
|
|
},
|
|
|
|
// 一二合
|
|
{
|
|
top: 17,
|
|
left: 25.9,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#f4b183',
|
|
text: '壳胆<br>组装',
|
|
link: 'caseShell',
|
|
},
|
|
{
|
|
top: 17,
|
|
left: 34.2,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#7f7f7f',
|
|
text: '预装<br>箱体库',
|
|
link: 'caseShell',
|
|
},
|
|
{
|
|
top: 17,
|
|
left: 42.5,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#00b050',
|
|
text: '箱体<br>发泡',
|
|
link: 'foaming',
|
|
},
|
|
{
|
|
top: 17,
|
|
left: 50.8,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#f4b183',
|
|
text: '门体<br>安装',
|
|
link: 'foaming2',
|
|
},
|
|
{
|
|
top: 17,
|
|
left: 59.1,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#7f7f7f',
|
|
text: '发泡<br>箱体库',
|
|
},
|
|
{
|
|
top: 17,
|
|
left: 67.4,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#ffc000',
|
|
text: '焊接',
|
|
link: 'pourInto',
|
|
},
|
|
{
|
|
top: 17,
|
|
left: 75.7,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#00b050',
|
|
text: '抽空<br>灌注',
|
|
link: '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: 'scanDown',
|
|
},
|
|
|
|
// 三层
|
|
{
|
|
top: 68,
|
|
left: 1,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#2f5597',
|
|
text: '门壳<br>自动成型',
|
|
link: 'liner',
|
|
},
|
|
{
|
|
top: 68,
|
|
left: 17.6,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#ed7d31',
|
|
text: '门壳预装',
|
|
link: 'liner',
|
|
},
|
|
{
|
|
top: 68,
|
|
left: 34.2,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#00b050',
|
|
text: '门体<br>发泡',
|
|
link: 'foaming2',
|
|
},
|
|
{
|
|
top: 68,
|
|
left: 50.8,
|
|
width: 6,
|
|
height: 4,
|
|
bgColor: '#7030a0',
|
|
text: '箱、门<br>匹配输送',
|
|
link: '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,
|
|
},
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
const getDate = () => {
|
|
let date = new Date()
|
|
let YYYY = date.getFullYear()
|
|
let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
|
|
let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
|
|
let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
|
|
let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
|
|
let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
|
|
this.date = `${YYYY} - ${MM} - ${dd}`
|
|
this.time = `${HH} : ${mm} : ${ss}`
|
|
}
|
|
getDate()
|
|
getDateIntervalFun = setInterval(getDate, 1000)
|
|
},
|
|
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')
|
|
viewer.controls.setTarget(285.6140415831262, -66.96447327588656, -15.909577343207037)
|
|
viewer.controls.setPosition(289.21362270826876, 1559.17755547545135, 1298.62483706445185)
|
|
|
|
|
|
let modelArr = [
|
|
// {
|
|
// url: '../../models/01-01-01/',
|
|
// link: '1'
|
|
// },
|
|
// {
|
|
// url: '../../models/01-01-02/',
|
|
// link: '2'
|
|
// },
|
|
// {
|
|
// url: '../../models/01-01-03/',
|
|
// link: '3'
|
|
// },
|
|
// {
|
|
// url: '../../models/01-01-04/',
|
|
// link: '4'
|
|
// },
|
|
// {
|
|
// url: '../../models/01-01-05/',
|
|
// link: '5'
|
|
// },
|
|
// {
|
|
// url: '../../models/01-01-06/',
|
|
// link: '6'
|
|
// },
|
|
// {
|
|
// url: '../../models/01-02-01/',
|
|
// link: '7'
|
|
// },
|
|
// {
|
|
// url: '../../models/01-02-02/',
|
|
// link: '8'
|
|
// },
|
|
// {
|
|
// url: '../../models/01-02-03/',
|
|
// link: '9'
|
|
// },
|
|
// {
|
|
// url: '../../models/01-02-04/',
|
|
// link: '10'
|
|
// },
|
|
// {
|
|
// url: '../../models/01-02-05/',
|
|
// link: '11'
|
|
// },
|
|
// {
|
|
// url: '../../models/01-02-06/',
|
|
// link: '12'
|
|
// },
|
|
// {
|
|
// url: '../../models/01-02-07/',
|
|
// link: '13'
|
|
// },
|
|
// {
|
|
// url: '../../models/01-03/',
|
|
// link: '14'
|
|
// },
|
|
// {
|
|
// url: '../../models/01-04/',
|
|
// link: '15'
|
|
// },
|
|
{
|
|
url: '../../models/01changfang/',
|
|
link: '16'
|
|
},
|
|
|
|
|
|
// {
|
|
// url: '../../models/02-01/',
|
|
// link: '20'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-01-01/',
|
|
// link: '21'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-01-02-01/',
|
|
// link: '22'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-01-02-02/',
|
|
// link: '23'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-01-03-01/',
|
|
// link: '24'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-01-03-02/',
|
|
// link: '25'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-02/',
|
|
// link: '26'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-02-01/',
|
|
// link: '27'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-02-02/',
|
|
// link: '28'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-03/',
|
|
// link: '29'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-03-1/',
|
|
// link: '30'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-03-pt-01/',
|
|
// link: '31'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-03-pt-02/',
|
|
// link: '32'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-03-pt-03/',
|
|
// link: '33'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-03-pt-04/',
|
|
// link: '34'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-03-pt-05/',
|
|
// link: '35'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-03-pt-06/',
|
|
// link: '36'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-04/',
|
|
// link: '37'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-04-01-01/',
|
|
// link: '38'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-04-01-02/',
|
|
// link: '39'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-04-02/',
|
|
// link: '40'
|
|
// },
|
|
// {
|
|
// url: '../../models/02-05/',
|
|
// link: '41'
|
|
// },
|
|
// {
|
|
// url: '../../models/02changfang/',
|
|
// link: '42'
|
|
// },
|
|
|
|
|
|
// {
|
|
// url: '../../models/03-01-01/',
|
|
// link: '51'
|
|
// },
|
|
// {
|
|
// url: '../../models/03-01-02/',
|
|
// link: '52'
|
|
// },
|
|
// {
|
|
// url: '../../models/03-02-01/',
|
|
// link: '53'
|
|
// },
|
|
// {
|
|
// url: '../../models/03-02-02/',
|
|
// link: '54'
|
|
// },
|
|
// {
|
|
// url: '../../models/03-02-03/',
|
|
// link: '55'
|
|
// },
|
|
// {
|
|
// url: '../../models/03-02-04/',
|
|
// link: '56'
|
|
// },
|
|
// {
|
|
// url: '../../models/03-02-05/',
|
|
// link: '57'
|
|
// },
|
|
// {
|
|
// url: '../../models/03-03/',
|
|
// link: '58'
|
|
// },
|
|
// {
|
|
// url: '../../models/03-04/',
|
|
// link: '59'
|
|
// },
|
|
// {
|
|
// url: '../../models/03-05/',
|
|
// link: '60'
|
|
// },
|
|
// {
|
|
// url: '../../models/03-06/',
|
|
// link: '61'
|
|
// },
|
|
// {
|
|
// url: '../../models/03-07/',
|
|
// link: '62'
|
|
// },
|
|
// {
|
|
// url: '../../models/03-08/',
|
|
// link: '63'
|
|
// },
|
|
// {
|
|
// url: '../../models/03-09/',
|
|
// link: '64'
|
|
// },
|
|
// {
|
|
// url: '../../models/03-10/',
|
|
// link: '65'
|
|
// },
|
|
|
|
]
|
|
|
|
let num = 10
|
|
const setModel = (e, i) => {
|
|
modelArr.slice(e, i).forEach(val => {
|
|
viewer.loadModel(val.url, {
|
|
background: false,
|
|
focus: false,
|
|
offline: true,
|
|
onLoad: function (m) {
|
|
|
|
num += 1
|
|
if (num < modelArr.length) {
|
|
setModel(num, num + 1)
|
|
}
|
|
m.on('click', function () {
|
|
if (val.link) {
|
|
if (isClickLink === val.link) {
|
|
console.log(val.link)
|
|
isClickLink = null
|
|
} else {
|
|
clickLinkTime && clearTimeout(clickLinkTime);
|
|
isClickLink = val.link
|
|
clickLinkTime = setTimeout(() => {
|
|
isClickLink = null
|
|
}, 500)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
})
|
|
}
|
|
setModel(0, 10)
|
|
// viewer.operator.enabled = true
|
|
viewer.controls.enablePan = false
|
|
viewer.controls.enableRotate = false
|
|
// viewer.controls.enableZoom = false
|
|
|
|
setInterval(() => {
|
|
console.log(viewer.controls.getView())
|
|
|
|
}, 1000)
|
|
|
|
// 灯光
|
|
// 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(val) {
|
|
this.show = ''
|
|
if (val) {
|
|
this.show1 = true
|
|
}
|
|
},
|
|
setNowFlowIndex(k) {
|
|
this.nowFlowIndex = k
|
|
},
|
|
toLink(e) {
|
|
if (e.link) {
|
|
this.show1 = false
|
|
console.log(e)
|
|
// e.link && this.$router.push(e.link)
|
|
this.show = 'board'
|
|
this.params = e.link
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0
|
|
}
|
|
|
|
.icon {
|
|
width: 2vw;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.headTitle {
|
|
position: absolute;
|
|
top: 5%;
|
|
left: 50%;
|
|
transform: translate(-50%, -100%);
|
|
font-size: 1.5vw;
|
|
color: #d6eaed;
|
|
letter-spacing: 10px;
|
|
}
|
|
|
|
.logo {
|
|
background-image: url("../../assets/board/logo.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 6vw;
|
|
height: 2.3vw;
|
|
position: absolute;
|
|
top: 1%;
|
|
left: 1%;
|
|
}
|
|
|
|
.time, .date {
|
|
position: absolute;
|
|
font-size: 0.8vw;
|
|
color: #fcfcfc;
|
|
transform: translate(-50%, -50%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.time {
|
|
top: 3.2%;
|
|
left: 85.8%;
|
|
}
|
|
|
|
.date {
|
|
top: 3.2%;
|
|
left: 94.1%;
|
|
}
|
|
|
|
.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: 85vw;
|
|
height: 15vw;
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
left: 50%;
|
|
top: 5%;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.whiteSpan {
|
|
color: white;
|
|
}
|
|
|
|
.titleBg {
|
|
background-image: url("../../assets/model/model/titleBg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100vw;
|
|
height: 3.21vw;
|
|
}
|
|
</style>
|