<template>
|
<div class="statistics-of-equipments-page">
|
<div class="page-block block-margin-bottom">
|
<module-a ref="blocka" :totals="totals" />
|
</div>
|
<!-- ************************** -->
|
<div class="eqp-info-blocks-frame" ref="frame">
|
<div v-for="index in eqpRows" class="eqp-info-blocks-row" :key="'block-row-'+index">
|
<div class="eqp-info-block page-block">
|
<module-b v-if="eqps[(index-1)*2].EquipmentType===1" :obj="eqps[(index-1)*2]" @change-status="onChangeStatus(eqps[(index-1)*2])" />
|
<module-c v-else :obj="eqps[(index-1)*2]" @change-status="onChangeStatus(eqps[(index-1)*2])" />
|
</div>
|
<div class="divider"></div>
|
<div class="eqp-info-block page-block" v-if="index!==eqpRows||(index===eqpRows&&(eqps.length%2===0))">
|
<module-b v-if="eqps[(index-1)*2+1].EquipmentType===1" :obj="eqps[(index-1)*2+1]" @change-status="onChangeStatus(eqps[(index-1)*2+1])" />
|
<module-c v-else :obj="eqps[(index-1)*2+1]" @change-status="onChangeStatus(eqps[(index-1)*2+1])" />
|
</div>
|
<div class="eqp-info-block" v-else></div>
|
</div>
|
</div>
|
<!-- **************************** -->
|
<change-status-modal v-model:visible="statusVisible" :row="statusRow" @submitCallback="onBackChangeStatus" />
|
</div>
|
</template>
|
|
<script>
|
import ModuleA from './compontents/ModuleA.vue'
|
import ModuleB from './compontents/ModuleB.vue'
|
import ModuleC from './compontents/ModuleC.vue'
|
import ChangeStatusModal from './compontents/ChangeStatusModal.vue'
|
export default {
|
name:'statisticsOfEquipmentsPage',
|
components:{ModuleA,ModuleB,ModuleC,ChangeStatusModal},
|
data(){
|
return {
|
eqpBlockWidth:100,
|
totals:{},
|
eqps:[],
|
statusRow:{},
|
statusVisible:false
|
}
|
},
|
computed:{
|
eqpRows(){
|
return Math.ceil(this.eqps.length/2)
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods:{
|
init(){
|
this.calEqpBlockWidth()
|
this.$loading();
|
this.getTotals((f1)=>{
|
if (f1) {
|
this.getEqps(false,(f2)=>{
|
if (f2) {
|
this.$refs.blocka.getChartData(false,()=>{
|
this.$loading().close();
|
})
|
} else {
|
this.$loading().close();
|
}
|
})
|
} else {
|
this.$loading().close();
|
}
|
})
|
},
|
calEqpBlockWidth(){
|
this.eqpBlockWidth = (this.$refs.frame.offsetWidth-28)/2;
|
},
|
getTotals(callback){
|
this.$api.get('GetEquipment',{},{block:'eqp'}).then((d)=>{
|
this.totals = d || {};
|
callback && callback(true)
|
}).catch(()=>{
|
callback && callback(false)
|
})
|
},
|
getEqps(needloading=true,callback){
|
if (needloading) {
|
this.$loading();
|
}
|
this.$api.get('Get',{},{block:'eqp'}).then((d)=>{
|
this.eqps = d || [];
|
if (needloading) {
|
this.$loading().close();
|
}
|
callback && callback(true)
|
}).catch(()=>{
|
if (needloading) {
|
this.$loading().close();
|
}
|
callback && callback(false)
|
})
|
},
|
onChangeStatus(obj){
|
this.statusRow = obj;
|
this.statusVisible = true
|
},
|
onBackChangeStatus(){
|
this.getEqps()
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.statistics-of-equipments-page{
|
.page-block{
|
background-color: #FFFFFF;
|
border-radius: 2px;
|
}
|
.block-margin-bottom{
|
margin-bottom: 16px;
|
}
|
.eqp-info-blocks-frame{
|
.eqp-info-blocks-row{
|
display:flex;
|
margin-bottom: 20px;
|
&>.divider{
|
width: 28px;
|
flex-shrink: 0;
|
}
|
&>.eqp-info-block{
|
width: 10px;
|
flex-grow: 1;
|
}
|
&:last-child{
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
</style>
|
<style lang="scss">
|
.statistics-of-equipments-page{
|
.eqp-info-block-containter{
|
position: relative;
|
display: flex;
|
.status-btn{
|
position: absolute;
|
top: 12px;
|
right: 12px;
|
z-index: 1;
|
}
|
.left-icon-view{
|
width: 122px;
|
flex-shrink: 0;
|
display: flex;
|
justify-content: center;
|
padding-top: 24px;
|
.icon-circle{
|
width: 74px;
|
height: 74px;
|
border-radius: 50%;
|
background-color: $color-primary;
|
color: #FFFFFF;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 52px;
|
}
|
}
|
.right-info-view{
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
.name-title{
|
flex-shrink: 0;
|
font-family: "Microsoft Tai Le Bold";
|
font-size: 16px;
|
font-weight: bold;
|
padding: 26px 0;
|
}
|
.infos-content{
|
flex: 1;
|
display: flex;
|
flex-wrap: wrap;
|
padding: 0 16px 12px 0;
|
.info-item{
|
width: 50%;
|
box-sizing: border-box;
|
display: flex;
|
font-size: 14px;
|
line-height: 22px;
|
margin-bottom: 12px;
|
.item-label{
|
flex-shrink: 0;
|
font-weight: 700;
|
display: flex;
|
justify-content: flex-end;
|
}
|
.item-content{
|
flex: 1;
|
min-height: 30px;
|
padding-right: 8px;
|
.border{
|
border:1px solid #dcdcdc;
|
box-sizing: border-box;
|
padding: 2px 4px 4px 4px;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
