<template>
|
<div class="home-page-compontent-e" v-loading="loading">
|
<div class="compontent-header">
|
<span class="pannel-title">故障信息</span>
|
<el-link type="primary" @click="onMore">更多</el-link>
|
</div>
|
|
<div class="list-frame">
|
|
<div class="list-item" v-for="(item,index) in list" :key="'warnings-'+index">
|
<div class="image-view">
|
<div class="image-box">
|
<div class="empty-image">
|
<span class="iconfont" :class="[item.DeviceType===1?'icon-machine1':'icon-agv']"></span>
|
</div>
|
</div>
|
</div>
|
<div class="content-view">
|
<div class="row1 auto-wrap">{{item.DeviceName}}</div>
|
<div class="row2 auto-wrap">{{item.WarningContent}} | {{item.WarningTime}}</div>
|
</div>
|
<div class="link-view">
|
<el-link type="primary" @click.stop="onOpenDetail(item)">详情</el-link>
|
</div>
|
</div>
|
|
</div>
|
|
<div class="pagination-row"><el-pagination :pager-count="5" layout="total,prev, pager, next, jumper" :total="total" @current-change="onPageList" /></div>
|
|
<detail-modal v-model:visible="detailModalVisible" :row="detailRow" />
|
</div>
|
</template>
|
|
<script>
|
import DetailModal from './ModelEDetailModal.vue'
|
export default {
|
name:'homePageCompontentE',
|
components:{DetailModal},
|
data(){
|
return {
|
loading:false,
|
list:[],
|
total:100,
|
queried:{...this.$config.pagination,...{pageSize:5}},
|
detailModalVisible:false,
|
detailRow:{}
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods:{
|
init(){
|
this.newList()
|
},
|
/* 翻页功能 */
|
onPageList(page){
|
this.queried.page = page;
|
this.getList();
|
},
|
/* 表格刷新至首页 */
|
newList(needLoading=true,callback){
|
this.queried = {...this.$config.pagination,...{pageSize:5}}
|
this.getList(callback,needLoading)
|
},
|
/* 更新数据表 */
|
getList(callback,needLoading=true){
|
if (needLoading) {
|
this.loading=true;
|
}
|
this.$api.post('HomePageGetWarning',this.queried,{block:'home'}).then((d)=>{
|
this.total = d.total || 0;
|
this.list = (d.list || []).map((currentItem)=>{
|
currentItem.WarningTime = this.$utils.project.parseTimeStr(currentItem.WarningTime)
|
return currentItem
|
});
|
if (needLoading) {
|
this.loading=false;
|
}
|
callback && callback(true)
|
}).catch((err)=>{
|
if (needLoading) {
|
this.loading=false;
|
}
|
callback && callback(false)
|
})
|
},
|
onOpenDetail(obj){
|
this.detailRow = obj;
|
this.detailModalVisible = true
|
},
|
onMore(){
|
this.$router.push('/sub-statistics-eqp-errs')
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.home-page-compontent-e{
|
padding: 24px;
|
.compontent-header{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 12px;
|
}
|
.list-item{
|
display: flex;
|
border-bottom: 1px solid #e9e9e9;
|
padding: 12px 0;
|
.image-view,.link-view{
|
flex-shrink: 0;
|
}
|
.image-view{
|
width: 63px;
|
display: flex;
|
align-items: center;
|
.image-box{
|
width: 45px;
|
height: 40px;
|
border-radius: 4px;
|
background-color: #f2f2f2;
|
overflow: hidden;
|
padding: 1px;
|
}
|
.empty-image{
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #666666;
|
font-size: 24px;
|
}
|
}
|
.link-view{
|
display: flex;
|
align-items: center;
|
padding-left: 12px;
|
}
|
.content-view{
|
font-family: Arial Normal;
|
flex: 1;
|
line-height: 21px;
|
.row1{
|
color: #272727;
|
}
|
.row2{
|
color: #8d8d8d;
|
}
|
}
|
}
|
}
|
</style>
|
