|
|
|
|
@ -6,49 +6,49 @@
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="3">
|
|
|
|
|
<div class="toolItem" @click="click1('factoryIntroduction')">
|
|
|
|
|
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
|
|
|
|
|
<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')">
|
|
|
|
|
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
|
|
|
|
|
<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')">
|
|
|
|
|
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
|
|
|
|
|
<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')">
|
|
|
|
|
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
|
|
|
|
|
<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()">
|
|
|
|
|
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
|
|
|
|
|
<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')">
|
|
|
|
|
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
|
|
|
|
|
<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('质量')">
|
|
|
|
|
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
|
|
|
|
|
<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('厂房视角')">
|
|
|
|
|
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
|
|
|
|
|
<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>
|
|
|
|
|
@ -70,13 +70,19 @@
|
|
|
|
|
<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+'66'}, ${nowFlowIndex === k ? '#00370C': i.bgColor});z-index:2;`">
|
|
|
|
|
<span>{{ i.text }}</span>
|
|
|
|
|
: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>
|
|
|
|
|
@ -97,6 +103,8 @@ 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) => {
|
|
|
|
|
@ -118,7 +126,9 @@ export default {
|
|
|
|
|
productDistribution,
|
|
|
|
|
dataCentre,
|
|
|
|
|
production,
|
|
|
|
|
live
|
|
|
|
|
live,
|
|
|
|
|
quality,
|
|
|
|
|
equipment
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
@ -133,15 +143,15 @@ export default {
|
|
|
|
|
left: 1,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
text: '内胆自助成型'
|
|
|
|
|
bgColor: '#2f5597',
|
|
|
|
|
text: '内胆<br>自动成型'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 2,
|
|
|
|
|
left: 9.3,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
bgColor: '#ed7d31',
|
|
|
|
|
text: '内胆预装'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
@ -149,8 +159,8 @@ export default {
|
|
|
|
|
left: 17.6,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
text: '内胆集存库'
|
|
|
|
|
bgColor: '#7f7f7f',
|
|
|
|
|
text: '内胆<br>集存库'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 二层
|
|
|
|
|
@ -159,15 +169,15 @@ export default {
|
|
|
|
|
left: 1,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
text: '箱壳自动成型'
|
|
|
|
|
bgColor: '#2f5597',
|
|
|
|
|
text: '箱壳<br>自动成型'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 35,
|
|
|
|
|
left: 9.3,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
bgColor: '#ed7d31',
|
|
|
|
|
text: '箱壳预装'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
@ -175,8 +185,8 @@ export default {
|
|
|
|
|
left: 17.6,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
text: '箱壳集存库'
|
|
|
|
|
bgColor: '#7f7f7f',
|
|
|
|
|
text: '箱壳<br>集存库'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 一二合
|
|
|
|
|
@ -185,39 +195,39 @@ export default {
|
|
|
|
|
left: 25.9,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
text: '壳胆组装'
|
|
|
|
|
bgColor: '#f4b183',
|
|
|
|
|
text: '壳胆<br>组装'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 17,
|
|
|
|
|
left: 34.2,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
text: '箱体预装'
|
|
|
|
|
bgColor: '#7f7f7f',
|
|
|
|
|
text: '箱体<br>预装'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 17,
|
|
|
|
|
left: 42.5,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
text: '箱体发泡'
|
|
|
|
|
bgColor: '#00b050',
|
|
|
|
|
text: '箱体<br>发泡'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 17,
|
|
|
|
|
left: 50.8,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
text: '门体安装'
|
|
|
|
|
bgColor: '#f4b183',
|
|
|
|
|
text: '门体<br>安装'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 17,
|
|
|
|
|
left: 59.1,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
bgColor: '#7f7f7f',
|
|
|
|
|
text: '发泡箱体库'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
@ -225,7 +235,7 @@ export default {
|
|
|
|
|
left: 67.4,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
bgColor: '#ffc000',
|
|
|
|
|
text: '焊接'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
@ -233,24 +243,24 @@ export default {
|
|
|
|
|
left: 75.7,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
text: '抽空灌注'
|
|
|
|
|
bgColor: '#00b050',
|
|
|
|
|
text: '抽空<br>灌注'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 17,
|
|
|
|
|
left: 84,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
text: '性能检测'
|
|
|
|
|
bgColor: '#ffc000',
|
|
|
|
|
text: '性能<br>检测'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 17,
|
|
|
|
|
left: 92.3,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
text: '包装入库'
|
|
|
|
|
bgColor: '#f4b183',
|
|
|
|
|
text: '包装<br>入库'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 三层
|
|
|
|
|
@ -259,15 +269,15 @@ export default {
|
|
|
|
|
left: 1,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
text: '门壳自动成型'
|
|
|
|
|
bgColor: '#2f5597',
|
|
|
|
|
text: '门壳<br>自动成型'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 68,
|
|
|
|
|
left: 17.6,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
bgColor: '#ed7d31',
|
|
|
|
|
text: '门壳预装'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
@ -275,16 +285,16 @@ export default {
|
|
|
|
|
left: 34.2,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
text: '门体发泡'
|
|
|
|
|
bgColor: '#00b050',
|
|
|
|
|
text: '门体<br>发泡'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 68,
|
|
|
|
|
left: 50.8,
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 4,
|
|
|
|
|
bgColor: '#00aa00',
|
|
|
|
|
text: '箱、门匹配输送'
|
|
|
|
|
bgColor: '#7030a0',
|
|
|
|
|
text: '箱、门<br>匹配输送'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
wireOptions: [
|
|
|
|
|
@ -635,10 +645,15 @@ export default {
|
|
|
|
|
padding: 0
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
width:2vw;
|
|
|
|
|
margin:0 auto ;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
width: 100vw;
|
|
|
|
|
//height: 33.33vw;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
height: 33.33vw;
|
|
|
|
|
//height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tool {
|
|
|
|
|
@ -664,8 +679,8 @@ export default {
|
|
|
|
|
.test {
|
|
|
|
|
//top: 20%;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
//height: 33.33vw;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
height: 33.33vw;
|
|
|
|
|
//height: 100vh;
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
yinq
10 months ago
