| | |
| | | <template> |
| | | <a-card :bordered="false"> |
| | | <a-card :bordered="false" style="display: flex;flex-direction: column"> |
| | | |
| | | <!-- 查询区域 --> |
| | | <!--<div class="table-page-search-wrapper">--> |
| | |
| | | <!--<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>--> |
| | | <!--</div>--> |
| | | |
| | | <div class="equipmentList"> |
| | | <div class="equipmentList" id="DeviceList"> |
| | | <!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">--> |
| | | <!--<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择 <a style="font-weight: 600">{{--> |
| | | <!--selectedRowKeys.length }}</a>项 --> |
| | |
| | | <!--</div>--> |
| | | |
| | | <a-table ref="table" bordered size="middle" rowKey="equipmentId" :columns="columns" :dataSource="dataSource" |
| | | :pagination="false" :loading="loading" |
| | | style="height: 100%; overflow-y: scroll;"> |
| | | :pagination="false" :loading="loading" :scroll="{x:'max-content',y:scrollY}"> |
| | | <template slot="equipmentId" slot-scope="text, record"> |
| | | <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div> |
| | | </template> |
| | | <template slot="equipmentName" slot-scope="text, record"> |
| | | <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div> |
| | | </template> |
| | | <template slot="oporationDict" slot-scope="text, record"> |
| | | <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div> |
| | | </template> |
| | | <template slot="equipmentStatus" slot-scope="text"> |
| | | <div :style="{color:text!==0?'#f00':null}">{{text===0?'正常':'异常'}}</div> |
| | | </template> |
| | | <template slot="collecttime" slot-scope="text, record"> |
| | | <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div> |
| | | </template> |
| | | <template slot="action" slot-scope="text, record"> |
| | | <a-popconfirm title="确定反馈吗?" @confirm="$emit('editEquipmentStatus',record)" v-has="'deiveBaseInfo:responseStatus'"> |
| | | <a>状态反馈</a> |
| | | </a-popconfirm> |
| | | </template> |
| | | </a-table> |
| | | |
| | | </div> |
| | | </a-card> |
| | | </template> |
| | | |
| | | <script> |
| | | import { postAction } from '@/api/manage' |
| | | |
| | | export default { |
| | | name: 'EquipmentLayout', |
| | | components: {}, |
| | | components: { }, |
| | | data() { |
| | | return { |
| | | loading:false, |
| | |
| | | title: '设备ID', |
| | | align: "center", |
| | | dataIndex: 'equipmentId', |
| | | scopedSlots: {customRender: 'equipmentId'}, |
| | | width:210 |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: "center", |
| | | dataIndex: 'equipmentName', |
| | | scopedSlots: {customRender: 'equipmentName'}, |
| | | width:300 |
| | | }, |
| | | { |
| | | title: '状态', |
| | | align: "center", |
| | | dataIndex: 'oporationDict', |
| | | scopedSlots: {customRender: 'oporationDict'}, |
| | | width:200 |
| | | }, |
| | | { |
| | | title: '设备异常', |
| | | align: "center", |
| | | dataIndex: 'equipmentStatus', |
| | | scopedSlots: {customRender: 'equipmentStatus'}, |
| | | width:200 |
| | | }, |
| | | { |
| | | title: '采集时间', |
| | | align: "center", |
| | | dataIndex: 'collecttime', |
| | | defaultSortOrder:'descend', |
| | | sorter: (a, b) => {return a.collecttime>b.collecttime?1:-1} |
| | | sorter: (a, b) => {return a.collecttime>b.collecttime?1:-1}, |
| | | scopedSlots: {customRender: 'collecttime'}, |
| | | width:350 |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | scopedSlots: {customRender: 'action'}, |
| | | align: "center", |
| | | width: 150, |
| | | fixed:'right' |
| | | } |
| | | ], |
| | | scrollY:465, |
| | | } |
| | | }, |
| | | props: { dataSource: { |
| | |
| | | watch: { |
| | | }, |
| | | methods: { |
| | | } |
| | | 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 |
| | | }, |
| | | }, |
| | | 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; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .equipmentList{ |
| | | height: 640px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .equipmentList{ |
| | | height: 493px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .equipmentList{ |
| | | height: 493px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .equipmentList{ |
| | | height: 394px!important; |
| | | overflow: scroll; |
| | | } |
| | | } |
| | | |