<template>
|
<div>
|
<div class="page-header">
|
<div>现场情况上报平台</div>
|
<span class="username">欢迎您，{{nickname()}}</span>
|
</div>
|
<slot name="function"/>
|
<div class="content-container">
|
<a-row>
|
<template v-for="(item,index) in buttonList">
|
<a-col :span="6" v-if="index<4">
|
<div :class="'button button'+(index+1)" @click="navigateTo(item)">
|
<img :src="require(`@/assets/terminal/${item.routePath}.svg`)"/>
|
<div>{{item.label}}</div>
|
</div>
|
</a-col>
|
</template>
|
</a-row>
|
|
<a-row>
|
<template v-for="(item,index) in buttonList">
|
<a-col :span="6" v-if="index>=4">
|
<div :class="'button button'+(index+1)" @click="navigateTo(item)">
|
<img :src="require(`@/assets/terminal/${item.routePath}.svg`)"/>
|
<div>{{item.label}}</div>
|
</div>
|
</a-col>
|
</template>
|
</a-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
|
export default {
|
name: 'TerminalIndex',
|
data() {
|
return {
|
buttonList: [
|
{
|
label: '上下班',
|
routePath: 'work',
|
isOpenNewPage: false
|
},
|
{
|
label: '故障报修',
|
routePath: 'fault',
|
isOpenNewPage: false
|
},
|
{
|
label: '停机上报',
|
routePath: 'close',
|
isOpenNewPage: false
|
},
|
{
|
label: '点检',
|
routePath: 'spotCheck',
|
isOpenNewPage: true
|
},
|
{
|
label: '合格率',
|
routePath: 'passRate',
|
isOpenNewPage: false
|
},
|
{
|
label: '程序呼叫',
|
routePath: 'call',
|
isOpenNewPage: false
|
},
|
{
|
label: '二保',
|
routePath: 'maintenance',
|
isOpenNewPage: true
|
},
|
{
|
label: '三保',
|
routePath: 'maintenance',
|
isOpenNewPage: true
|
}
|
]
|
}
|
},
|
methods: {
|
...mapGetters(['nickname']),
|
|
navigateTo(record) {
|
if (!record.isOpenNewPage) this.$router.push('/terminal/' + record.routePath)
|
else {
|
window.open(this.$router.resolve('/flowable/workflow/FlowTodo').href, '_blank')
|
return
|
}
|
document.title = record.label + '-MDC智慧车间'
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.page-header {
|
font-size: 2vw;
|
color: #000;
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 1vw;
|
|
span {
|
font-size: 1.3vw;
|
color: #999;
|
}
|
}
|
|
.content-container {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
padding: 3% 10%;
|
|
.ant-row {
|
flex: 1;
|
|
.ant-col {
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.button {
|
width: 9.63vw;
|
height: 9.38vw;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
font-size: 1.3vw;
|
color: #fff;
|
border-radius: 1vw;
|
cursor: pointer;
|
transition: all .1s ease-in-out;
|
|
img {
|
width: 2.6vw;
|
margin-bottom: 0.8vw;
|
}
|
|
&:hover {
|
transform: scale(1.05);
|
}
|
|
&.button1 {
|
background: linear-gradient(top, #5ADEAD, #3BC3A6);
|
background: -webkit-linear-gradient(top, #5ADEAD, #3BC3A6);
|
}
|
|
&.button2 {
|
background: linear-gradient(top, #76A9FA, #5B8CF3);
|
background: -webkit-linear-gradient(top, #76A9FA, #5B8CF3);
|
}
|
|
&.button3 {
|
background: linear-gradient(top, #FAB976, #FB9557);
|
background: -webkit-linear-gradient(top, #FAB976, #FB9557);
|
}
|
|
&.button4 {
|
background: linear-gradient(top, #5FC2F9, #45A4F4);
|
background: -webkit-linear-gradient(top, #5FC2F9, #45A4F4);
|
}
|
|
&.button5 {
|
background: linear-gradient(top, #62F2EA, #55D6CE);
|
background: -webkit-linear-gradient(top, #62F2EA, #55D6CE);
|
}
|
|
&.button6 {
|
background: linear-gradient(top, #91A0F5, #6D7CF7);
|
background: -webkit-linear-gradient(top, #91A0F5, #6D7CF7);
|
}
|
|
&.button7 {
|
background: linear-gradient(top, #FF6A5A, #DB5A50);
|
background: -webkit-linear-gradient(top, #FF6A5A, #DB5A50);
|
}
|
|
&.button8 {
|
background: linear-gradient(top, #FFF248, #EADE46);
|
background: -webkit-linear-gradient(top, #FFF248, #EADE46);
|
}
|
}
|
}
|
}
|
}
|
</style>
|
