| | |
| | | <base-tree @sendSelectBaseTree="changeSelection" @getCurrSelected="changeSelectionNode"></base-tree> |
| | | </a-col> |
| | | <a-col :md="24-5" :sm="24"> |
| | | <div class="equipMessage"> |
| | | <table> |
| | | <tr> |
| | | <td>关机 |
| | | <span class="equipShutdown"></span> |
| | | </td> |
| | | <td>{{offNumber}}</td> |
| | | <td>待机 |
| | | <span class="standbyNumber"></span> |
| | | </td> |
| | | <td>{{standbyNumber}}</td> |
| | | <td>运行 |
| | | <span class="equipRun"></span> |
| | | </td> |
| | | <td>{{workNumber}}</td> |
| | | <td>报警 |
| | | <span class="equipAlarm"></span> |
| | | </td> |
| | | <td>{{warningNumber}}</td> |
| | | <td>总数</td> |
| | | <td>{{allNumber}}</td> |
| | | </tr> |
| | | </table> |
| | | <!--<div class="equipMessage">--> |
| | | <!--<table>--> |
| | | <!--<tr>--> |
| | | <!--<td>关机--> |
| | | <!--<span class="equipShutdown"></span>--> |
| | | <!--</td>--> |
| | | <!--<td>{{offNumber}}</td>--> |
| | | <!--<td>待机--> |
| | | <!--<span class="standbyNumber"></span>--> |
| | | <!--</td>--> |
| | | <!--<td>{{standbyNumber}}</td>--> |
| | | <!--<td>运行--> |
| | | <!--<span class="equipRun"></span>--> |
| | | <!--</td>--> |
| | | <!--<td>{{workNumber}}</td>--> |
| | | <!--<td>报警--> |
| | | <!--<span class="equipAlarm"></span>--> |
| | | <!--</td>--> |
| | | <!--<td>{{warningNumber}}</td>--> |
| | | <!--<td>总数</td>--> |
| | | <!--<td>{{allNumber}}</td>--> |
| | | <!--</tr>--> |
| | | <!--</table>--> |
| | | |
| | | <!--</div>--> |
| | | <div class="device-status-info"> |
| | | <a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info"> |
| | | <template v-if="item.value!=99"> |
| | | <div>{{ item.label }}</div> |
| | | <div class="status-square" :style="{ backgroundColor: item.color }"></div> |
| | | <div>{{getDeviceNumberByStatus(item.value) }}</div> |
| | | </template> |
| | | <template v-else> |
| | | <div>{{ item.label }}</div> |
| | | <div>{{getDeviceNumberByStatus(item.value) }}</div> |
| | | </template> |
| | | </a-space> |
| | | </div> |
| | | |
| | | <div> |
| | | <a-tabs default-active-key="1"> |
| | | <a-tab-pane key="1" tab="布局图"> |
| | | <equipment-layout :dataList="dataList" :equipmentId="selectEquementId" :node="selectEquement"></equipment-layout> |
| | | </a-tab-pane> |
| | | <a-tab-pane key="2" tab="列表" force-render> |
| | | <equipment-list :dataSource="dataList"></equipment-list> |
| | | <equipment-list :dataSource="dataList" @editEquipmentStatus="editEquipmentStatus"></equipment-list> |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | </div> |
| | |
| | | workNumber: 0, |
| | | allNumber: 0, |
| | | url: { |
| | | list: '/mdc/mdcEquipment/queryEquipmentMonitorList' |
| | | list: '/mdc/mdcEquipment/queryEquipmentMonitorList', |
| | | updateEquipmentStatus:'/mdc/mdcEquipment/updateEquipmentStatus' |
| | | }, |
| | | param:{}, |
| | | timer:null, |
| | | timerzhun:null |
| | | timerzhun:null, |
| | | deviceStatusList: [ |
| | | { |
| | | label: '关机', |
| | | value: 0, |
| | | color: '#A8A8A8' |
| | | }, |
| | | { |
| | | label: '待机', |
| | | value: 2, |
| | | color: '#FFFF00' |
| | | }, |
| | | { |
| | | label: '运行', |
| | | value: 3, |
| | | color: '#00EE00' |
| | | }, |
| | | { |
| | | label: '报警', |
| | | value: 22, |
| | | color: '#FF0000' |
| | | }, |
| | | { |
| | | label: '总数', |
| | | value: 99, |
| | | color: '#fff' |
| | | } |
| | | ],// 设备状态指示灯列表, |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | // setInterval(this.equipmentStatistics(), 5*1000); |
| | | }, |
| | | methods: { |
| | | equipmentStatistics(param) { |
| | | equipmentStatistics(param,resopnse={key:false}) { |
| | | getAction(this.url.list, param).then((res) => { |
| | | this.dataList = [] |
| | | if (res.success) { |
| | |
| | | this.dataList = res.result |
| | | // console.log(this.dataList) |
| | | this.allNumber = this.dataList.length |
| | | if(resopnse.key){ |
| | | this.$notification.success({ |
| | | key:'equipmentStatus', |
| | | message: '消息', |
| | | description: resopnse.message, |
| | | }); |
| | | } |
| | | for (let i = 0; i < this.dataList.length; i++) { |
| | | let item = this.dataList[i] |
| | | switch (item.oporationDict) { |
| | |
| | | this.selectEquement = val.equipmentId |
| | | clearInterval(this.timer); |
| | | this.timer = null |
| | | let param = {} |
| | | if (!val.equipmentId) { |
| | | param.key = val.key |
| | | this.param.key=val.key |
| | | clearInterval(this.timerzhun); |
| | | this.timerzhun = null |
| | | this.equipmentStatistics(param) |
| | | this.equipmentStatistics(this.param) |
| | | this.timer = setInterval(() => { |
| | | setTimeout( this.equipmentStatistics(param),0) |
| | | setTimeout( this.equipmentStatistics(this.param),0) |
| | | },1000*10) |
| | | }else{ |
| | | param.key = val.parentId |
| | | this.param.key=val.parentId |
| | | clearInterval(this.timerzhun); |
| | | this.timerzhun = null |
| | | this.equipmentStatistics(param) |
| | | this.equipmentStatistics(this.param) |
| | | this.timer = setInterval(() => { |
| | | setTimeout( this.equipmentStatistics(param),0) |
| | | setTimeout( this.equipmentStatistics(this.param),0) |
| | | },1000*10) |
| | | } |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * 单击状态反馈后触发 |
| | | * @param record |
| | | */ |
| | | editEquipmentStatus(record){ |
| | | console.log('子组件record',record.id) |
| | | const _this=this |
| | | this.$notification.info({ |
| | | key:'equipmentStatus', |
| | | message: '消息', |
| | | description: '反馈中...', |
| | | }); |
| | | getAction(this.url.updateEquipmentStatus,{id:record.id}) |
| | | .then(res=>{ |
| | | if(res.success) { |
| | | _this.equipmentStatistics(this.param,{key:true,message:res.message}) |
| | | }else{ |
| | | this.$notification.warning({ |
| | | message:'消息', |
| | | description:res.message |
| | | }); |
| | | } |
| | | }) |
| | | .catch(err=>{ |
| | | this.$notification.error({ |
| | | message:'消息', |
| | | description:err.message |
| | | }); |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * 根据设备状态值获取对应设备数量 |
| | | * @param value 设备状态值 |
| | | * @returns {number} 设备数量 |
| | | */ |
| | | getDeviceNumberByStatus(value) { |
| | | if (value === 99) return this.dataList.length |
| | | return this.dataList.filter((item) => item.oporation === 1 && value === 2 || item.oporation === value).length |
| | | }, |
| | | }, |
| | | mounted(){ |
| | | this.equipmentStatistics() |
| | |
| | | } |
| | | } |
| | | </script> |
| | | <style scoped> |
| | | <style scoped lang="less"> |
| | | @import '~@assets/less/common.less'; |
| | | |
| | | .equipMessage { |
| | |
| | | .equipMessage table td .equipAlarm { |
| | | background-color: #FD0008; |
| | | } |
| | | |
| | | .device-status-info { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | align-items: center; |
| | | |
| | | .single-status-info { |
| | | margin: 10px; |
| | | .status-square { |
| | | width: 20px; |
| | | height: 20px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 3px; |
| | | } |
| | | } |
| | | } |
| | | </style> |