<template>
|
<div class="page-container">
|
<a-row>
|
<h1>车间布局看板</h1>
|
<a-list :grid="{gutter: 16, column:4}">
|
<a-list-item v-for="item in workshopList" :key="item.id">
|
<div class="workshop-name" @click="navigateToWorkshopSignage(item.id)">{{item.workshopName}}</div>
|
</a-list-item>
|
</a-list>
|
</a-row>
|
|
|
<a-row>
|
<h1>分级看板</h1>
|
<a-list :grid="{gutter: 16, column:4}">
|
<a-list-item>
|
<div class="workshop-name" @click="navigateToWorkshopSignageByUrl('/GradeWorkshopSignage')">分级看板</div>
|
</a-list-item>
|
<a-list-item>
|
<div class="workshop-name" @click="navigateToWorkshopSignageByUrl('/RepairWorkshopSignage')">维修看板</div>
|
</a-list-item>
|
</a-list>
|
</a-row>
|
</div>
|
</template>
|
|
<script>
|
import api from '@/api/mdc'
|
|
export default {
|
name: 'WorkshopSignageEntrance',
|
data() {
|
return {
|
indexStyle: 1,
|
workshopList: []
|
}
|
},
|
created() {
|
this.getWorkshopListByApi()
|
},
|
methods: {
|
/**
|
* 通过车间Id跳转至相应车间大屏看板
|
* @param id 车间Id
|
*/
|
navigateToWorkshopSignage(id) {
|
const url = this.$router.resolve(`/MdcWorkshopSignage/${id}`).href
|
window.open(url, '_blank')
|
},
|
|
/**
|
* 通过车间Url地址跳转至对应大屏看板
|
* @param httpUrl 车间Url地址
|
*/
|
navigateToWorkshopSignageByUrl(httpUrl) {
|
const url = this.$router.resolve(httpUrl).href
|
window.open(url, '_blank')
|
},
|
|
/**
|
* 获取车间列表
|
*/
|
getWorkshopListByApi() {
|
api.getWorkshopListInHomePageApi().then(res => {
|
console.log('res', res)
|
if (res.result && res.result.length > 0) {
|
this.workshopList = res.result
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.page-container {
|
padding: 30px 30px 0;
|
|
.workshop-name {
|
/*width: 100%;*/
|
background: #fff;
|
padding: 55px 0;
|
border-radius: 20px;
|
text-align: center;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-size: 30px;
|
cursor: pointer;
|
margin: 0 8px;
|
}
|
}
|
|
</style>
|
