| | |
| | | <!--</table>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | <a-table :columns="columns" :data-source="dataList" bordered :pagination="false" :scroll="{y:168}" |
| | | <a-table :columns="columns" :data-source="dataList" bordered :pagination="false" :scroll="{y:210}" |
| | | :customRow="customRow" |
| | | rowKey="alarmCode" |
| | | rowKey="alarmCode" @expand="handleExpandChange" |
| | | > |
| | | <span slot="timeCount" slot-scope="text">{{getFormattedTime(text)}}</span> |
| | | <!--<a-table--> |
| | |
| | | <!--:data-source="row.innerDataList"--> |
| | | <!--:pagination="false"--> |
| | | <!--rowKey="equipmentId"--> |
| | | <!--:loading="loading"--> |
| | | <!-->--> |
| | | <!--<span slot="duration" slot-scope="text">{{getFormattedTime(text)}}</span>--> |
| | | <!--</a-table>--> |
| | |
| | | |
| | | const columns = [ |
| | | { title: '报警号', dataIndex: 'alarmCode', key: 'alarmCode', align: 'center' }, |
| | | { title: '出现次数', dataIndex: 'count', key: 'count', align: 'center' }, |
| | | { title: '出现次数', dataIndex: 'count', key: 'count', align: 'center', sorter: (a, b) => b.count - a.count }, |
| | | { |
| | | title: '合计持续时间', |
| | | dataIndex: 'timeCount', |
| | | key: 'timeCount', |
| | | scopedSlots: { customRender: 'timeCount' }, |
| | | align: 'center' |
| | | align: 'center', |
| | | sorter: (a, b) => b.timeCount - a.timeCount |
| | | }, |
| | | { title: '报警信息', dataIndex: 'alarmContent', key: 'alarmContent', align: 'center' } |
| | | ] |
| | |
| | | XData: [0], |
| | | YData: [0], |
| | | columns, |
| | | innerColumns |
| | | innerColumns, |
| | | hasRequsetAlarmCodeList: [] |
| | | } |
| | | }, |
| | | props: { nodeTree: '', Type: '', nodePeople: '' }, |
| | |
| | | if (res.success) { |
| | | // this.tableHeads = res.result.dates |
| | | this.dataList = res.result |
| | | this.dataList[0].innerDataList=[ |
| | | { |
| | | equipmentId: '11234', |
| | | equipmentName: '立体机床', |
| | | alarmTime: 20, |
| | | endTime: 20, |
| | | duration: 123 |
| | | }, |
| | | { |
| | | equipmentId: '4213', |
| | | equipmentName: '卧室机床', |
| | | alarmTime: 312, |
| | | endTime: 31, |
| | | duration: 421 |
| | | } |
| | | ] |
| | | this.dataList[1].innerDataList=[ |
| | | { |
| | | equipmentId: '4213', |
| | | equipmentName: '卧室机床', |
| | | alarmTime: 312, |
| | | endTime: 31, |
| | | duration: 421 |
| | | } |
| | | ] |
| | | this.hasRequsetAlarmCodeList = [] |
| | | // this.draw() |
| | | // this.checkSameData(this.dataList) |
| | | // this.checkSameData1(this.dataList) |
| | |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * 自定义展开表格图标 |
| | | * @param props 图标属性 |
| | | * @returns {null} 若主表数据下无数据则不显示图标 |
| | | */ |
| | | expandIcon(props){ |
| | | console.log('props',props) |
| | | if (props.record.innerDataList&&props.record.innerDataList.length>0){ |
| | | if (props.expanded) { |
| | | return <a style="margin-right:0px;color:#999" onClick={e=> { |
| | | props.onExpand(props.record, e); |
| | | }}><a-icon type="minus" /></a> |
| | | } else{ |
| | | return <a style="margin-right:0px;color:#999" onClick={e => { |
| | | props.onExpand(props.record, e); |
| | | }}><a-icon type="plus"/></a> |
| | | handleExpandChange(expanded, record) { |
| | | console.log('expanded', expanded, 'record', record) |
| | | let _this = this |
| | | // 当展开时若该行未被展开过才会请求后台数据,展开过的数据会被缓存无需重复请求 |
| | | if (expanded && !this.hasRequsetAlarmCodeList.includes(record.alarmCode)) { |
| | | this.loading = true |
| | | setTimeout(() => { |
| | | _this.dataList.forEach(item => { |
| | | if (record.alarmCode === item.alarmCode) { |
| | | item.innerDataList = [ |
| | | { |
| | | equipmentId: '11234', |
| | | equipmentName: '立体机床', |
| | | alarmTime: 20, |
| | | endTime: 20, |
| | | duration: 123 |
| | | }, |
| | | { |
| | | equipmentId: '4213', |
| | | equipmentName: '卧室机床', |
| | | alarmTime: 312, |
| | | endTime: 31, |
| | | duration: 421 |
| | | } |
| | | }else{ |
| | | return null |
| | | ] |
| | | } |
| | | }) |
| | | this.loading = false |
| | | }, 1000) |
| | | this.hasRequsetAlarmCodeList.push(record.alarmCode) |
| | | } |
| | | } |
| | | |
| | | // /** |
| | | // * 自定义展开表格图标 |
| | | // * @param props 图标属性 |
| | | // * @returns {null} 若主表数据下无数据则不显示图标 |
| | | // */ |
| | | // expandIcon(props){ |
| | | // console.log('props',props) |
| | | // if (props.record.innerDataList&&props.record.innerDataList.length>0){ |
| | | // if (props.expanded) { |
| | | // return <a style="margin-right:0px;color:#999" onClick={e=> { |
| | | // props.onExpand(props.record, e); |
| | | // }}><a-icon type="minus" /></a> |
| | | // } else{ |
| | | // return <a style="margin-right:0px;color:#999" onClick={e => { |
| | | // props.onExpand(props.record, e); |
| | | // }}><a-icon type="plus"/></a> |
| | | // } |
| | | // }else{ |
| | | // return null |
| | | // } |
| | | // } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | height: 100%; |
| | | } |
| | | |
| | | /deep/ .ant-table.ant-table-bordered { |
| | | height: 265px; |
| | | } |
| | | |
| | | /deep/ .ant-table-scroll>.ant-table-placeholder { |
| | | height: 210px; |
| | | } |
| | | </style> |