<!--
|
* @Author: 陈祝文 15821704398@163.com
|
* @Date: 2023-03-14 08:37:51
|
* @LastEditors: 陈祝文 15821704398@163.com
|
* @LastEditTime: 2023-03-16 16:29:27
|
* @FilePath: \iwara-scada-web\src\views\main\EquipmentCurrentMonitor\index.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<div>
|
<a-card :bordered="false" :bodyStyle="tstyle">
|
<div>
|
<tab :statusEnums="statusEnums" :activeKey.sync="activeKey"></tab>
|
</div>
|
</a-card>
|
<!-- 展示框 -->
|
<a-card :bordered="false">
|
<div class="equipment_flex" v-if="filterList.length > 0">
|
<flex-item v-for="(item,index) in filterList" :key="item.id" :content="item" ></flex-item>
|
</div>
|
<div v-else>
|
<a-empty />
|
</div>
|
</a-card>
|
</div>
|
</template>
|
<script>
|
import moment from 'moment'
|
import { getEquipmentListQuery, getEquipmentEnums } from '@/api/modular/main/EquipmentCurrentMonitorManage'
|
import flexItem from './modules/flexItem.vue'
|
import tab from './modules/tab.vue'
|
export default {
|
components: {
|
tab,
|
flexItem
|
},
|
data() {
|
return {
|
tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
|
activeKey: '0',
|
timer: null,
|
statusEnums: [], // 设备状态
|
equipmentList: [], // 总的列表
|
filterList: [] // 赛选后的列表
|
}
|
},
|
watch: {
|
activeKey(val) {
|
if (val == 0) {
|
this.filterList = this.equipmentList
|
} else {
|
this.filterList = this.equipmentList.filter((item) => item.equipmentCurrentState == val)
|
}
|
}
|
},
|
|
created() {
|
this.getEquipmentList()
|
this.getEquipmentStatusEnum()
|
this.timer = setInterval(this.getEquipmentList, 10000)
|
},
|
|
beforeDestroy() {
|
clearInterval(this.timer)
|
},
|
|
methods: {
|
// 获取所有设备列表及状态
|
getEquipmentList() {
|
getEquipmentListQuery().then((res) => {
|
this.equipmentList = res.data
|
if (this.activeKey == 0) {
|
this.filterList = this.equipmentList
|
} else {
|
this.filterList = this.equipmentList.filter((item) => item.equipmentCurrentState == this.activeKey)
|
}
|
|
this.getEquipmentStatusEnum()
|
// console.log(this.filterList, 'this.filterList')
|
// this.filterList = res.data
|
})
|
},
|
getEquipmentStatusEnum() {
|
getEquipmentEnums().then((res) => {
|
this.statusEnums = res.data
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.equipment_flex {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-around;
|
align-content: center;
|
}
|
</style>
|
