<template>
|
<div class="content-main">
|
<div class="top-bar">
|
<el-form style="margin-top: 10px;" ref="form" :inline="true" :model="searchData">
|
<el-form-item label="设备编号:" style="margin-right: 50px;">
|
<el-input size="small" v-model="searchData.code" placeholder="请输入设备编号">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="设备名称:" style="margin-right: 20px;">
|
<el-input size="small" v-model="searchData.name" placeholder="请输入设备名称">
|
</el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" type="primary" @click="searchInspections">查询</el-button>
|
<el-button size="small" type="primary" plain @click="reset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="library-table">
|
<el-card v-for="(item,index) in device" :key="index" class="box-card" style="width: 22.8%;">
|
<div class="header">
|
<div style="display: flex;justify-content: start; width: 100%;">
|
<div class="el-icon-set-up" style="font-size: 25px;color: rgb(103, 194, 58);line-height: 55px ;"></div>
|
<div class="device_code">{{ item.code }}</div>
|
</div>
|
<div v-show="item.status === 0" class="status">
|
<el-tag type="success">运行</el-tag>
|
</div>
|
<div v-show="item.status === 1" class="status">
|
<el-tag type="danger">故障</el-tag>
|
</div>
|
</div>
|
<div class="content">
|
<div>
|
<span style="color: rgb(136, 135, 135);">设备名称： </span>
|
<span>{{ item.name }}</span>
|
</div>
|
<div>
|
<span style="color: rgb(136, 135, 135);">鉴定有效期： </span>
|
<span>{{ item.valid }}</span>
|
</div>
|
</div>
|
<el-divider></el-divider>
|
<div class="footer">
|
<el-button type="text" icon="el-icon-document">项目详情</el-button>
|
<el-divider direction="vertical" style="width: 200px;"></el-divider>
|
<el-button type="text" icon="el-icon-pie-chart">项目采集</el-button>
|
</div>
|
|
</el-card>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data(){
|
return {
|
searchData:{
|
code: '',
|
name: ''
|
},
|
device:[
|
{
|
code: 'NF-220907',
|
status: 0,
|
name: '拉力机U60',
|
valid: '2022-11-09 ~ 2023.11.10'
|
},
|
{
|
code: 'NF-220907',
|
status: 0,
|
name: '拉力机U60',
|
valid: '2022-11-09 ~ 2023.11.10'
|
}
|
]
|
}
|
},
|
methods:{
|
searchInspections(){
|
|
},
|
reset(){
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.content-main{
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
.top-bar{
|
margin: -25px -15px;
|
background: #fff;
|
display: flex;
|
justify-content: space-between;
|
padding: 5px 24px 0px 24px;
|
.rightBtn{
|
display: flex;
|
justify-content: space-between;
|
}
|
}
|
.library-table{
|
background-color: #fff;
|
flex: 1;
|
margin: 0px -15px;
|
margin-top: 40px;
|
display: flex;
|
// flex-direction: space-evenly;
|
flex-wrap: wrap;
|
.el-card{
|
height: 300px;
|
margin-left: 30px;
|
margin-top: 20px;
|
.header{
|
display: flex;
|
justify-content: space-between;
|
height: 60px;
|
line-height: 60px;
|
.device_code{
|
font-size: 24px;
|
font-weight: bold;
|
margin-left: 20px;
|
}
|
}
|
.content{
|
font-size: 16px;
|
margin-top: 10px;
|
>div{
|
padding: 10px 0px;
|
}
|
}
|
.footer{
|
.el-button{
|
width: 45%;
|
font-size: 18px;
|
color: black;
|
// background-color: #bfa;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
