修改界面显示

master
夜笙歌 10 months ago
parent c52384de3b
commit 04463db120

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 689 KiB

@ -751,9 +751,9 @@ export default {
.meter { .meter {
position: absolute; position: absolute;
top: 19.7%; top: 19.7%;
left: 61.5%; left: 62.2%;
transform: translateY(-50%); transform: translateY(-50%);
font-size: 0.8vw; font-size: 0.9vw;
color: #fff; color: #fff;
} }
</style> </style>

@ -677,7 +677,7 @@ export default {
top: 19.7%; top: 19.7%;
left: 62.5%; left: 62.5%;
transform: translateY(-50%); transform: translateY(-50%);
font-size: 0.8vw; font-size: 0.9vw;
color: #fff; color: #fff;
} }
</style> </style>

@ -7,9 +7,9 @@
</div> </div>
<div class="loss">{{loss}}</div> <div class="loss">{{loss}}</div>
<div class="meter">{{meter}}</div> <div class="meter">{{meter}}</div>
<span style="position: absolute;top: 10%;left: 14%;color: #fff;font-size: 1vw;">目标1000&nbsp;&nbsp;进度目标1000&nbsp;&nbsp;实际1000&nbsp;&nbsp;差异0&nbsp;&nbsp;达成率100% </span> <span style="position: absolute;top: 10%;left: 14%;color: #fff;font-size: 0.9vw;">目标1000&nbsp;&nbsp;进度目标1000&nbsp;&nbsp;实际1000&nbsp;&nbsp;差异0&nbsp;&nbsp;达成率100% </span>
<span style="position: absolute;top: 54.3%;left: 19%;color: #fff;font-size: 1vw">目标3% &nbsp;&nbsp;&nbsp;实际1% &nbsp;&nbsp;&nbsp;累计不良数1</span> <span style="position: absolute;top: 54.3%;left: 19%;color: #fff;font-size: 0.9vw">目标3% &nbsp;&nbsp;&nbsp;实际1% &nbsp;&nbsp;&nbsp;累计不良数1</span>
<span style="position: absolute;top: 54.3%;left: 66.7%;color: #CFD2D0;font-size: 1.0vw">合计111</span> <span style="position: absolute;top: 54.3%;left: 66.7%;color: #CFD2D0;font-size: 0.9vw">合计111</span>
<div class="scrollTable"> <div class="scrollTable">
<div style="background-color: #094170"> <div style="background-color: #094170">

@ -12,9 +12,9 @@
<div class="classSelect"> <div class="classSelect">
<el-button :class="nowLine === 1 ? 'clickLine':''" @click="setLine(1)">线1</el-button> <el-button :class="nowLine === 1 ? 'clickLine':''" @click="setLine(1)" size="mini">产线1</el-button>
<el-button :class="nowLine === 2 ? 'clickLine':''" @click="setLine(2)">线2</el-button> <el-button :class="nowLine === 2 ? 'clickLine':''" @click="setLine(2)" size="mini">产线2</el-button>
<el-button :class="nowLine === 3 ? 'clickLine':''" @click="setLine(3)"></el-button> <el-button :class="nowLine === 3 ? 'clickLine':''" @click="setLine(3)" size="mini">合并</el-button>
<!-- <el-radio v-model="selectValue" label="1">线1</el-radio>--> <!-- <el-radio v-model="selectValue" label="1">线1</el-radio>-->
<!-- <el-radio v-model="selectValue" label="2">线2</el-radio>--> <!-- <el-radio v-model="selectValue" label="2">线2</el-radio>-->
<!-- <el-radio v-model="selectValue" label="3"></el-radio>--> <!-- <el-radio v-model="selectValue" label="3"></el-radio>-->
@ -226,7 +226,7 @@ export default {
}, },
show: true, show: true,
}, },
data: ['人A', '人B', '人C', '人D', '人E', '人F', '人G', '人H'], data: ['组A', '组B', '组C', '组D', '组E', '组F', '组G', '组H'],
type: 'category', type: 'category',
}, },
yAxis: { yAxis: {
@ -1181,26 +1181,26 @@ export default {
.totalNum { .totalNum {
position: absolute; position: absolute;
top: 11.5%; top: 11.3%;
left: 18%; left: 18%;
transform: translateY(-50%); transform: translateY(-50%);
color: #fff; color: #fff;
font-size: 0.8vw; font-size: 0.9vw;
} }
.info1 { .info1 {
position: absolute; position: absolute;
top: 11.5%; top: 11.3%;
left: 44.5%; left: 44.5%;
transform: translateY(-50%); transform: translateY(-50%);
color: #fff; color: #fff;
font-size: 0.8vw; font-size: 1vw;
} }
.classSelect { .classSelect {
position: absolute; position: absolute;
top: 5%; top: 6.5%;
left: 9%; left: 4%;
} }
.el-radio { .el-radio {

File diff suppressed because it is too large Load Diff

@ -41,13 +41,13 @@
</div> </div>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<div class="toolItem" @click="click1('质量')"> <div class="toolItem" @click="click1('quality')">
<i class="el-icon-s-tools" style="font-size:2.2vw"></i> <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
<div class="grid-content bg-purple-light">质量</div> <div class="grid-content bg-purple-light">质量</div>
</div> </div>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<div class="toolItem" @click="click1('厂房视角')"> <div class="toolItem" @click="click1('equipment')">
<i class="el-icon-s-tools" style="font-size:2.2vw"></i> <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
<div class="grid-content bg-purple-light">设备</div> <div class="grid-content bg-purple-light">设备</div>
</div> </div>
@ -70,13 +70,19 @@
<transition name="children"> <transition name="children">
<live :exit="exit" v-if="show === 'live'"/> <live :exit="exit" v-if="show === 'live'"/>
</transition> </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="flowChart" v-show="show1">
<div class="flowItem" v-for="(i,k) in flowItemOptions" @click="setNowFlowIndex(k)" <div class="flowItem" v-for="(i,k) in flowItemOptions" @click="setNowFlowIndex(k)"
:class="nowFlowIndex === k ? 'wireAnimation' : ''" :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;`"> :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>{{ i.text }}</span> <span v-html="i.text"></span>
</div> </div>
<div class="wire" v-for="i in wireOptions" <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> :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 dataCentre from './dataCentre'
import production from './production' import production from './production'
import live from './live' import live from './live'
import quality from './quality'
import equipment from './equipment'
const isAMRT = () => { const isAMRT = () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -118,7 +126,9 @@ export default {
productDistribution, productDistribution,
dataCentre, dataCentre,
production, production,
live live,
quality,
equipment
}, },
data() { data() {
return { return {
@ -133,15 +143,15 @@ export default {
left: 1, left: 1,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#2f5597',
text: '内胆自助成型' text: '内胆<br>自动成型'
}, },
{ {
top: 2, top: 2,
left: 9.3, left: 9.3,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#ed7d31',
text: '内胆预装' text: '内胆预装'
}, },
{ {
@ -149,8 +159,8 @@ export default {
left: 17.6, left: 17.6,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#7f7f7f',
text: '内胆集存库' text: '内胆<br>集存库'
}, },
// //
@ -159,15 +169,15 @@ export default {
left: 1, left: 1,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#2f5597',
text: '箱壳自动成型' text: '箱壳<br>自动成型'
}, },
{ {
top: 35, top: 35,
left: 9.3, left: 9.3,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#ed7d31',
text: '箱壳预装' text: '箱壳预装'
}, },
{ {
@ -175,8 +185,8 @@ export default {
left: 17.6, left: 17.6,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#7f7f7f',
text: '箱壳集存库' text: '箱壳<br>集存库'
}, },
// //
@ -185,39 +195,39 @@ export default {
left: 25.9, left: 25.9,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#f4b183',
text: '壳胆组装' text: '壳胆<br>组装'
}, },
{ {
top: 17, top: 17,
left: 34.2, left: 34.2,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#7f7f7f',
text: '箱体预装' text: '箱体<br>预装'
}, },
{ {
top: 17, top: 17,
left: 42.5, left: 42.5,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#00b050',
text: '箱体发泡' text: '箱体<br>发泡'
}, },
{ {
top: 17, top: 17,
left: 50.8, left: 50.8,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#f4b183',
text: '门体安装' text: '门体<br>安装'
}, },
{ {
top: 17, top: 17,
left: 59.1, left: 59.1,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#7f7f7f',
text: '发泡箱体库' text: '发泡箱体库'
}, },
{ {
@ -225,7 +235,7 @@ export default {
left: 67.4, left: 67.4,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#ffc000',
text: '焊接' text: '焊接'
}, },
{ {
@ -233,24 +243,24 @@ export default {
left: 75.7, left: 75.7,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#00b050',
text: '抽空灌注' text: '抽空<br>灌注'
}, },
{ {
top: 17, top: 17,
left: 84, left: 84,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#ffc000',
text: '性能检测' text: '性能<br>检测'
}, },
{ {
top: 17, top: 17,
left: 92.3, left: 92.3,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#f4b183',
text: '包装入库' text: '包装<br>入库'
}, },
// //
@ -259,15 +269,15 @@ export default {
left: 1, left: 1,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#2f5597',
text: '门壳自动成型' text: '门壳<br>自动成型'
}, },
{ {
top: 68, top: 68,
left: 17.6, left: 17.6,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#ed7d31',
text: '门壳预装' text: '门壳预装'
}, },
{ {
@ -275,16 +285,16 @@ export default {
left: 34.2, left: 34.2,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#00b050',
text: '门体发泡' text: '门体<br>发泡'
}, },
{ {
top: 68, top: 68,
left: 50.8, left: 50.8,
width: 6, width: 6,
height: 4, height: 4,
bgColor: '#00aa00', bgColor: '#7030a0',
text: '箱、门匹配输送' text: '箱、门<br>匹配输送'
} }
], ],
wireOptions: [ wireOptions: [
@ -637,8 +647,8 @@ export default {
.container { .container {
width: 100vw; width: 100vw;
//height: 33.33vw; height: 33.33vw;
height: 100vh; //height: 100vh;
} }
.tool { .tool {
@ -664,8 +674,8 @@ export default {
.test { .test {
//top: 20%; //top: 20%;
width: 100vw; width: 100vw;
//height: 33.33vw; height: 33.33vw;
height: 100vh; //height: 100vh;
position: absolute; position: absolute;
} }

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save