<template>
|
<a-card :bordered="false">
|
<a-row type="flex" :gutter="16">
|
<a-col :md="5" :sm="24">
|
<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>-->
|
<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" @editEquipmentStatus="editEquipmentStatus"></equipment-list>
|
</a-tab-pane>
|
</a-tabs>
|
</div>
|
</a-col>
|
</a-row>
|
|
|
</a-card>
|
</template>
|
|
<script>
|
import { putAction, getAction } from '@/api/manage'
|
import { frozenBatch } from '@/api/api'
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import JInput from '@/components/jeecg/JInput'
|
import BaseTree from '../common/BaseTree'
|
import EquipmentLayout from './modules/deviceBaseInfo/EquipmentLayout'
|
import EquipmentList from './modules/deviceBaseInfo/EquipmentList'
|
import JSuperQuery from '@/components/jeecg/JSuperQuery'
|
import JThirdAppButton from '@/components/jeecgbiz/thirdApp/JThirdAppButton'
|
|
export default {
|
name: 'DeviceBaseInfo',
|
components: {
|
JThirdAppButton,
|
JInput,
|
BaseTree,
|
JSuperQuery,
|
EquipmentLayout,
|
EquipmentList
|
},
|
data() {
|
return {
|
description: '设备信息',
|
selectEquementId: '',
|
selectEquement: {},
|
equipmentStatisticsInfo: {},
|
dataList: [],
|
standbyNumber: 0,
|
offNumber: 0,
|
warningNumber: 0,
|
workNumber: 0,
|
allNumber: 0,
|
url: {
|
list: '/mdc/mdcEquipment/queryEquipmentMonitorList',
|
updateEquipmentStatus:'/mdc/mdcEquipment/updateEquipmentStatus'
|
},
|
param:{},
|
timer: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() {
|
// this.equipmentStatistics()
|
// setInterval(this.equipmentStatistics(), 5*1000);
|
},
|
methods: {
|
equipmentStatistics(param,resopnse={key:false}) {
|
getAction(this.url.list, param).then((res) => {
|
this.dataList = []
|
if (res.success) {
|
if(res.result.length != 0){
|
this.standbyNumber = 0
|
this.offNumber = 0
|
this.warningNumber = 0
|
this.workNumber = 0
|
this.allNumber = 0
|
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) {
|
case "待机" : this.standbyNumber = this.standbyNumber + 1;break;
|
// case 2 : this.standbyNumber = this.standbyNumber + 1;break;
|
case "运行" : this.workNumber = this.workNumber + 1;break;
|
case "关机" : this.offNumber = this.offNumber + 1;break;
|
case "报警" : this.warningNumber = this.warningNumber + 1;break;
|
default:break;
|
}
|
}
|
}else{
|
// this.$message.warning("此车间下面无设备！！")
|
this.$notification.warning({
|
message:'消息',
|
description:"此车间下面无设备！！"
|
});
|
}
|
} else {
|
// this.$message.warn(res.message)
|
this.$notification.warning({
|
message:'消息',
|
description:res.message
|
});
|
}
|
})
|
},
|
changeSelection(val) {
|
this.selectEquementId = val
|
},
|
changeSelectionNode(val) {
|
// console.log(val)
|
this.selectEquement = val.equipmentId
|
clearInterval(this.timer);
|
this.timer = null
|
if (!val.equipmentId) {
|
this.param.key=val.key
|
clearInterval(this.timerzhun);
|
this.timerzhun = null
|
this.equipmentStatistics(this.param)
|
this.timer = setInterval(() => {
|
setTimeout( this.equipmentStatistics(this.param),0)
|
},1000*10)
|
}else{
|
this.param.key=val.parentId
|
clearInterval(this.timerzhun);
|
this.timerzhun = null
|
this.equipmentStatistics(this.param)
|
this.timer = setInterval(() => {
|
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()
|
// this.timerzhun = setInterval(() => {
|
// setTimeout( this.equipmentStatistics(),0)
|
// },1000*10)
|
},
|
beforeDestroy(){
|
clearInterval(this.timer);
|
this.timer = null
|
}
|
}
|
</script>
|
<style scoped lang="less">
|
@import '~@assets/less/common.less';
|
|
.equipMessage {
|
width: 100%;
|
height: 20px;
|
}
|
|
.equipMessage table {
|
width: 60%;
|
height: 100%;
|
line-height: 50%;
|
float: right;
|
}
|
|
.equipMessage table td {
|
text-align: center;
|
}
|
|
.equipMessage table td span {
|
display: inline-block;
|
width: 15px;
|
height: 15px;
|
}
|
|
.equipMessage table td .equipShutdown {
|
background-color: #808080;
|
}
|
|
.equipMessage table td .standbyNumber {
|
background-color: #ffbf37;
|
}
|
|
.equipMessage table td .equipRun {
|
background-color: #19FE01;
|
}
|
|
.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>
|
