<template>
|
<div class="facility-container">
|
<div class="left-content">
|
<div class="left-title">设备资料</div>
|
<div class="img-box">
|
<div class="left-img" :style="backgroundStyle">
|
<img v-if="!formDetail.facilityUrl" :src="defaultImg" alt="">
|
</div>
|
</div>
|
<div class="left-detail">
|
<p>设备名称：{{formDetail.facilityName}}</p>
|
<p>生产厂家：{{formDetail.supplier}}</p>
|
<p>出厂日期：{{formDetail.installDate}}</p>
|
</div>
|
</div>
|
<div class="right-content">
|
<div class="search-box">
|
<el-input class="search-input" v-model="searchParam"></el-input>
|
<el-button class="search-btn" @click="searchList">搜索</el-button>
|
</div>
|
<div class="table-box">
|
<div class="table-title">设备列表</div>
|
<div class="table-content">
|
<el-table v-loading="loading" :data="tableData" width="100%" max-height="690px">
|
<el-table-column
|
label="序号"
|
align="center"
|
prop="num"
|
fixed="left"
|
>
|
</el-table-column>
|
<el-table-column
|
v-for="(item, key, index) of tableHeader"
|
:prop="key.toString()"
|
:label="item"
|
:key="index"
|
align="center"
|
>
|
<template #default="scope">
|
<div v-if="key.toString() === 'detail'" class="table-handle">
|
<div @click="toDetail(scope.row)"></div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="pagination">
|
<el-pagination
|
v-model:current-page="pageParam.page"
|
background
|
:page-size="pageParam.limit"
|
layout="total,prev, pager, next, jumper"
|
:total="pageParam.total"
|
@current-change="currentPage"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import facilityApi from '@/api/facility/index'
|
import { PREURL} from '@/config/index'
|
import defaultImage from '@/assets/images/screen/facility/no-img.png'
|
|
//搜索
|
const searchParam = ref()
|
const searchList = () =>{
|
getTableData({keywords:searchParam.value})
|
}
|
/**
|
* Table表格权限数据列表相关
|
*/
|
const pageParam = ref({
|
total:200,
|
limit:15,
|
page:1,
|
})
|
const tableData = ref([]);
|
let tableHeader = ref({
|
facilityCode: "设备编号",
|
facilityName: "设备名称",
|
address: "安装地点",
|
installDate: "安装时间",
|
detail: "设备详情",
|
})
|
|
/** 获取列表 */
|
const loading = ref(false);
|
async function getTableData(val) {
|
loading.value = true;
|
if(val){
|
if(!val.limit){
|
val.limit = 5
|
}
|
if(!val.page){
|
val.page = 1
|
}
|
}else{
|
val = { limit:5,page:1 }
|
}
|
await facilityApi().search(val).then((res) =>{
|
tableData.value = res.data.list
|
//添加序号
|
tableData.value.forEach((item,index) =>{
|
item.num = index + 1
|
})
|
//设置详情为tableData第一项
|
formDetail.value.facilityName = tableData.value[0].facilityName
|
formDetail.value.supplier = tableData.value[0].supplier
|
formDetail.value.installDate = tableData.value[0].installDate
|
formDetail.value.facilityUrl = tableData.value[0].facilityUrl
|
console.log('formDetail.value.facilityUrl',formDetail.value.facilityUrl)
|
//分页参数
|
pageParam.value.total = res.data.total
|
pageParam.value.limit = res.data.limit
|
pageParam.value.page = res.data.page
|
})
|
loading.value = false;
|
}
|
//分页
|
const currentPage = (val) =>{
|
getTableData({page:val})
|
}
|
// 详情
|
|
const formDetail = ref({
|
facilityName:'',
|
supplier:'',
|
installDate:'',
|
facilityUrl:'',
|
})
|
const defaultImg = ref(defaultImage)
|
const toDetail = (row) =>{
|
formDetail.value.facilityName = row.facilityName
|
formDetail.value.supplier = row.supplier
|
formDetail.value.installDate = row.installDate
|
formDetail.value.facilityUrl = row.facilityUrl
|
console.log('todetail',formDetail.value.facilityUrl)
|
}
|
const backgroundStyle = computed(() => ({
|
backgroundImage: `url('${ PREURL+ formDetail.value.facilityUrl }')`,
|
backgroundSize: 'contain',
|
backgroundRepeat: 'no-repeat',
|
backgroundPosition: 'center',
|
}));
|
onMounted(async ()=>{
|
await getTableData()
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.facility-container{
|
width: 100%;
|
height:100%;
|
padding:0 3% 1% 3%;
|
display:flex;
|
justify-content: space-between;
|
}
|
.left-content{
|
width:22%;
|
height:100%;
|
background-image: url("../../../assets/images/screen/facility/left-box.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding:4% 1% 1%;
|
.left-title{
|
width: 100%;
|
height:5%;
|
background-image: url("../../../assets/images/screen/facility/left-title.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
font-weight: 400;
|
font-size: 20px;
|
color: #FFFFFF;
|
padding-left:9%;
|
padding-top:1%;
|
}
|
.img-box{
|
width:83%;
|
height:35%;
|
background: rgba(244, 248, 250, 0.21);
|
border-radius: 10px;
|
margin: 15% auto 0;
|
padding: 1%;
|
.left-img{
|
width:100%;
|
height:100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
.left-detail{
|
width:100%;
|
height: 30%;
|
//background: rgba(255, 255, 255, 0.29);
|
padding:6% 10% 10%;
|
p{
|
font-weight: 400;
|
font-size: 16px;
|
color: #FFFFFF;
|
//background: rgba(0, 175, 240, 0.51);
|
}
|
}
|
}
|
.right-content{
|
width:76%;//698
|
height:100%;//918.7
|
display:flex;
|
justify-content: space-between;
|
flex-direction: column;
|
align-items: center;
|
padding:1% 0;
|
.search-box{
|
width:100%;
|
height:6%;
|
display: flex;
|
.search-input{
|
width:70%;
|
height:100%;
|
margin-right:3%;
|
:deep(.el-input__wrapper){
|
background:linear-gradient(to right ,rgba(6,92,135,0.56),rgba(6,92,135,0.16)) !important;
|
border: 1px solid #1fb0be !important;
|
border-radius: 8px !important;
|
}
|
.el-input.is-focus .el-input__inner{
|
border-color: #2ec4d2 !important;
|
}
|
}
|
.search-btn{
|
width:7%;
|
height:100%;
|
background-color: #2a6bb6 !important;
|
border: 1px solid #03e9ff !important;
|
border-radius: 8px !important;
|
font-weight: 400;
|
font-size: 22px;
|
color: #B9F9FF;
|
}
|
}
|
.table-box{
|
width:100%;
|
height:89%;
|
background-image: url("../../../assets/images/screen/facility/right-box.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
.table-title{
|
height:10%;
|
width:100%;
|
display: flex;
|
justify-content:center;
|
align-items: center;
|
font-weight: 500;
|
font-size: 22px;
|
color: #8DFEFF;
|
}
|
.table-content{
|
height:80%;
|
width:100%;
|
padding: 1% 4%;
|
//background: #1D2129;
|
//修改边框和字体
|
:deep(.el-table){
|
--el-table-border-color:rgba(0,0,0,0);
|
font-weight: 400;
|
font-size: 20px;
|
color: #D1D1D1;
|
}
|
//修改头部字体
|
:deep(.el-table__header th){
|
font-weight: 400;
|
font-size: 20px;
|
color: #D1D1D1;
|
}
|
/*最外层透明*/
|
:deep(.el-table),
|
:deep(.el-table__expanded-cell){
|
background-color: transparent !important;
|
}
|
/* 表格内背景颜色 */
|
:deep(.el-table th),
|
:deep(.el-table tr),
|
:deep(.el-table td){
|
background-color: transparent !important;
|
border-bottom:1px solid #1D627D !important;
|
}
|
//:deep(.el-table tr){
|
// border:1px solid #000 !important;
|
//}
|
/*去除底边框*/
|
:deep(.el-table td.el-table__cell){
|
border:0;
|
}
|
:deep(.el-table th.el-table__cell.is-leaf) {
|
border: 0;
|
}
|
/*去除底部灰条.el-table::before*/
|
:deep(.el-table::before) {
|
display: none;
|
}
|
.table-handle{
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
div{
|
width:30px;
|
height: 30px;
|
background-image: url("../../../assets/images/screen/facility/detail.png");
|
}
|
}
|
}
|
.pagination{
|
width:100%;
|
height:10%;
|
display:flex;
|
justify-content:center;
|
:deep(.el-pagination__total),
|
:deep(.el-pagination__goto),
|
:deep(.el-pagination__classifier){
|
color: #bcd4f3
|
}
|
:deep(.el-pager li) {
|
font-size: 15px;
|
color: #BAEBEC;
|
background: transparent;
|
padding: 0 4px;
|
border: 1px solid #BAEBEC;
|
border-radius: 0;
|
margin: 0 4px;
|
min-width: 25px;
|
height: 25px;
|
}
|
:deep(.el-pagination button) {
|
color: #BAEBEC;
|
background: transparent;
|
padding: 0 4px;
|
border-radius: 0;
|
margin: 0 4px;
|
}
|
:deep(.el-pagination .btn-next .el-icon),
|
:deep(.el-pagination .btn-prev .el-icon) {
|
font-size: 18px !important;
|
}
|
:deep(.el-input__wrapper) {
|
background: transparent;
|
box-shadow: 0 0 0 1px #BAEBEC inset;
|
border-radius: 0;
|
height: 25px;
|
min-width: 30px;
|
}
|
:deep(.el-input__inner) {
|
font-size: 16px;
|
color: #BAEBEC;
|
height: 25px;
|
line-height: 30px !important;
|
}
|
:deep(.el-pager li.is-active) {
|
background-color: #1FB0BE;
|
color: #ffffff;
|
border: 1px solid #1FB0BE;
|
}
|
}
|
}
|
}
|
</style>
|
