1 changed files with 93 additions and 83 deletions
@ -1,83 +1,93 @@ |
|||
<template> |
|||
<div class="accessToLib-container"> |
|||
<div class="accessToLib-item"> |
|||
<span>总进馆人数</span> |
|||
<count-to :start-val="0" :end-val="totalNum" :duration="3200" class="panel-num" /> |
|||
</div> |
|||
<div v-if="!isSelfService" class="accessToLib-item"> |
|||
<span>月进馆人数</span> |
|||
<count-to :start-val="0" :end-val="monthNum" :duration="3200" class="panel-num" /> |
|||
</div> |
|||
<div class="accessToLib-item"> |
|||
<span>今日进馆人数</span> |
|||
<count-to :start-val="0" :end-val="dayNum" :duration="3200" class="panel-num" /> |
|||
</div> |
|||
<div v-if="isSelfService" class="accessToLib-item"> |
|||
<span>今日出馆人数</span> |
|||
<count-to :start-val="0" :end-val="dayOutNum" :duration="3200" class="panel-num" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchInitIntoNum } from '@/api/library' |
|||
import CountTo from 'vue-count-to' |
|||
|
|||
export default { |
|||
name: 'AccessToLibrary', |
|||
components: { |
|||
CountTo |
|||
}, |
|||
props: { |
|||
isSelfService: { |
|||
type: Boolean, |
|||
default: function() { |
|||
return false |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
timer: null, |
|||
dayNum: 0, |
|||
dayOutNum: 0, |
|||
monthNum: 0, |
|||
totalNum: 0 |
|||
} |
|||
}, |
|||
created() { |
|||
// 获取数据 |
|||
this.getInitIntoNum() |
|||
}, |
|||
mounted() { |
|||
// 每15秒获取一次 |
|||
this.timer = setInterval(() => { |
|||
this.getInitIntoNum() |
|||
}, 15000) |
|||
}, |
|||
beforeDestroy() { |
|||
// 销毁定时器 |
|||
this.$once('hook:beforeDestroy', () => { |
|||
clearInterval(this.timer) |
|||
}) |
|||
}, |
|||
methods: { |
|||
getInitIntoNum() { |
|||
FetchInitIntoNum().then((res) => { |
|||
if (res.errCode === 0) { |
|||
this.dayNum = res.data.dayPeopleNum |
|||
this.monthNum = res.data.monthPeopleNum |
|||
this.totalNum = res.data.historyPeopleNum |
|||
this.dayOutNum = res.data.dayOutNUm |
|||
} else { |
|||
this.$message.error('接口错误') |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
</style> |
|||
<template> |
|||
<div class="accessToLib-container"> |
|||
<div class="accessToLib-item"> |
|||
<span>总进馆人数</span> |
|||
<count-to :start-val="0" :end-val="totalNum" :duration="3200" class="panel-num" /> |
|||
</div> |
|||
<div v-if="!isSelfService" class="accessToLib-item"> |
|||
<span>月进馆人数</span> |
|||
<count-to :start-val="0" :end-val="monthNum" :duration="3200" class="panel-num" /> |
|||
</div> |
|||
<div class="accessToLib-item"> |
|||
<span>今日进馆人数</span> |
|||
<count-to :start-val="0" :end-val="dayNum" :duration="3200" class="panel-num" /> |
|||
</div> |
|||
<div v-if="isSelfService" class="accessToLib-item"> |
|||
<span>今日出馆人数</span> |
|||
<count-to :start-val="0" :end-val="dayOutNum" :duration="3200" class="panel-num" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchInitIntoNum } from '@/api/library' |
|||
import CountTo from 'vue-count-to' |
|||
|
|||
export default { |
|||
name: 'AccessToLibrary', |
|||
components: { |
|||
CountTo |
|||
}, |
|||
props: { |
|||
isSelfService: { |
|||
type: Boolean, |
|||
default: function() { |
|||
return false |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
timer: null, |
|||
dayNum: 0, |
|||
dayOutNum: 0, |
|||
monthNum: 0, |
|||
totalNum: 0 |
|||
} |
|||
}, |
|||
created() { |
|||
// 获取数据 |
|||
this.getInitIntoNum() |
|||
}, |
|||
mounted() { |
|||
// 每15秒获取一次 |
|||
this.timer = setInterval(() => { |
|||
this.getInitIntoNum() |
|||
}, 15000) |
|||
}, |
|||
beforeDestroy() { |
|||
// 销毁定时器 |
|||
this.$once('hook:beforeDestroy', () => { |
|||
clearInterval(this.timer) |
|||
}) |
|||
}, |
|||
methods: { |
|||
getInitIntoNum() { |
|||
let params |
|||
if (!this.isSelfService) { |
|||
params = { |
|||
doorCodes: null |
|||
} |
|||
} else { |
|||
params = { |
|||
doorCodes: 'D001' |
|||
} |
|||
} |
|||
FetchInitIntoNum(params).then((res) => { |
|||
if (res.errCode === 0) { |
|||
this.dayNum = res.data.dayPeopleNum |
|||
this.monthNum = res.data.monthPeopleNum |
|||
this.totalNum = res.data.historyPeopleNum |
|||
this.dayOutNum = res.data.dayOutNUm |
|||
} else { |
|||
this.$message.error('接口错误') |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue