| | |
| | | |
| | | <a-table ref="table" bordered size="middle" rowKey="equipmentId" :columns="columns" :dataSource="dataSource" |
| | | :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="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> |
| | | <div>{{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> |
| | | <!--<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> |
| | |
| | | data() { |
| | | return { |
| | | loading:false, |
| | | url: { |
| | | |
| | | }, |
| | | url: {}, |
| | | columns: [ |
| | | { |
| | | title: '设备ID', |
| | | align: "center", |
| | | align: 'center', |
| | | dataIndex: 'equipmentId', |
| | | scopedSlots: {customRender: 'equipmentId'}, |
| | | width:210 |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | align: "center", |
| | | align: 'center', |
| | | dataIndex: 'equipmentName', |
| | | scopedSlots: {customRender: 'equipmentName'}, |
| | | width:300 |
| | | }, |
| | | { |
| | | title: '状态', |
| | | align: "center", |
| | | align: 'center', |
| | | dataIndex: 'oporationDict', |
| | | scopedSlots: {customRender: 'oporationDict'}, |
| | | width:200 |
| | | }, |
| | | { |
| | | title: '设备异常', |
| | | align: "center", |
| | | align: 'center', |
| | | dataIndex: 'equipmentStatus', |
| | | scopedSlots: {customRender: 'equipmentStatus'}, |
| | | width:200 |
| | | }, |
| | | { |
| | | title: '采集时间', |
| | | align: "center", |
| | | align: 'center', |
| | | dataIndex: 'collecttime', |
| | | defaultSortOrder:'descend', |
| | | sorter: (a, b) => {return a.collecttime>b.collecttime?1:-1}, |
| | | scopedSlots: {customRender: 'collecttime'}, |
| | | sorter: (a, b) => { |
| | | return a.collecttime > b.collecttime ? 1 : -1 |
| | | }, |
| | | width:350 |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | scopedSlots: {customRender: 'action'}, |
| | | align: "center", |
| | | width: 150, |
| | | fixed:'right' |
| | | } |
| | | // { |
| | | // title: '操作', |
| | | // dataIndex: 'action', |
| | | // scopedSlots: {customRender: 'action'}, |
| | | // align: "center", |
| | | // width: 150, |
| | | // fixed:'right' |
| | | // } |
| | | ], |
| | | scrollY:465, |
| | | scrollY: 465 |
| | | } |
| | | }, |
| | | props: { dataSource: { |
| | | props: { |
| | | dataSource: { |
| | | type: Array, |
| | | required: true, |
| | | default: [] |
| | | } }, |
| | | watch: { |
| | | } |
| | | }, |
| | | 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> |
| | |
| | | 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; |