<template>
|
<a-card :bordered="false" style="display: flex;flex-direction: column">
|
<div class="table-page-search-wrapper">
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
<a-row :gutter="12">
|
<a-col :md="7" :sm="8">
|
<a-form-item label="状态" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
|
<a-select v-model='queryParam.status' placeholder="请选择状态">
|
<a-select-option value="1">待机</a-select-option>
|
<a-select-option value="2">运行</a-select-option>
|
<a-select-option value="3">报警</a-select-option>
|
<a-select-option value="4">关机</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :md="7" :sm="8">
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
</span>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
|
<div class="equipmentList" id="DeviceList">
|
<a-table
|
ref="table"
|
bordered
|
size="middle"
|
rowKey="equipmentId"
|
:columns="columns"
|
:dataSource="localDataSource"
|
:pagination="false"
|
:loading="loading"
|
:scroll="{x:'max-content',y:scrollY}"/>
|
</div>
|
</a-card>
|
</template>
|
|
<script>
|
import { postAction, getAction } from '@/api/manage'
|
import { filterObj } from '@/utils/util'
|
|
export default {
|
name: 'EquipmentLayout',
|
components: { },
|
data() {
|
return {
|
localDataSource: [...this.dataSource],
|
loading:false,
|
queryParam: {},
|
columns: [
|
{
|
title: '设备编号',
|
align: "center",
|
dataIndex: 'equipmentId',
|
width:210
|
},
|
{
|
title: '安装位置',
|
align: "center",
|
dataIndex: 'equipmentName',
|
width:300
|
},
|
{
|
title: '状态',
|
align: "center",
|
dataIndex: 'oporationDict',
|
width:200
|
},
|
{
|
title: '采集时间',
|
align: "center",
|
dataIndex: 'collecttime',
|
defaultSortOrder:'descend',
|
sorter: (a, b) => {return a.collecttime>b.collecttime?1:-1},
|
width:350
|
}
|
],
|
scrollY:465,
|
url: {
|
list: '/mdc/mdcEquipment/queryEquipmentMonitorList',
|
}
|
}
|
},
|
props: {
|
dataSource: {
|
type: Array,
|
required: true,
|
default: []
|
},
|
equipmentId: ''
|
},
|
watch: {
|
dataSource(newVal) {
|
this.localDataSource = [...newVal]; // ✅ 监听父组件数据变化
|
}
|
},
|
methods: {
|
loadData() {
|
var params = this.getQueryParams();//查询条件
|
this.loading = true;
|
getAction(this.url.list, params).then((res) => {
|
if (res.success) {
|
this.localDataSource = res.result
|
}
|
if (res.code === 510) {
|
this.$message.warning(res.message)
|
}
|
this.loading = false;
|
})
|
},
|
getQueryParams() {
|
let param = Object.assign({}, this.queryParam);
|
param.key = this.equipmentId;
|
return filterObj(param);
|
},
|
handleWindowResize(){
|
const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2)
|
const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2)
|
this.scrollY = boxHeight - tableHeadHeight
|
},
|
// 重置字典类型搜索框的内容
|
searchReset() {
|
var that = this;
|
that.queryParam.status = "";
|
that.queryParam.key = this.equipmentId;
|
that.loadData();
|
},
|
searchQuery() {
|
this.loadData();
|
}
|
},
|
mounted(){
|
window.addEventListener('resize',this.handleWindowResize)
|
this.handleWindowResize()
|
},
|
}
|
</script>
|
<style scoped>
|
.equipmentList{
|
flex: 1;
|
overflow: hidden;
|
}
|
|
@media screen and (min-width: 1920px){
|
.equipmentList{
|
height: 640px!important;
|
}
|
}
|
@media screen and (min-width: 1680px) and (max-width: 1920px){
|
.equipmentList{
|
height: 640px!important;
|
}
|
}
|
@media screen and (min-width: 1400px) and (max-width: 1680px){
|
.equipmentList{
|
height: 493px!important;
|
}
|
}
|
@media screen and (min-width: 1280px) and (max-width: 1400px){
|
.equipmentList{
|
height: 493px!important;
|
}
|
}
|
@media screen and (max-width: 1280px){
|
.equipmentList{
|
height: 394px!important;
|
}
|
}
|
|
</style>
|
