<template>
<div class="index">
<!--标题-->
<mt-header title="首页"/>
<!--内容-->
<div class="index-container">
<div class="index-func-div">
<div class="index-func-btn-div">
<div class="func-btn" @click="changetab('well')">
<div class="btn-icon"><img :src="iconWell" slot="icon"></div>
<div class="btn-title">闸井管理</div>
</div>
</div>
<div class="index-func-btn-div">
<div class="func-btn" @click="changetab('job')">
<div class="btn-icon"><img :src="iconAlarm" slot="icon"></div>
<div class="btn-title">告警工单</div>
</div>
</div>
<div class="index-func-btn-div">
<div class="func-btn" @click="openBfcf">
<div class="btn-icon"><img :src="iconGuard" slot="icon"></div>
<div class="btn-title">布防撤防</div>
</div>
</div>
</div>
<div class="index-static-div">
<!--闸井布防撤防数量统计-->
<div class="index-card">
<div class="card-header">闸井监控</div>
<div class="card-body divid3">
<div v-for="item in wellCount" :key="item.name" class="static-span" @click="clickWellManage(item.name)">
<div :class="item.type">
{{item.count}}
</div>
<div class="span-desn">
{{item.name}}
</div>
</div>
<div class="clear-float"></div>
</div>
</div>
<!--工单数量统计-->
<div class="index-card">
<div class="card-header">工 单</div>
<div class="card-body divid4">
<div v-for="item in jobCount" :key="item.name" class="static-span" @click="clickJobManage(item.name)">
<div :class="item.type">
{{item.count}}
</div>
<div class="span-desn">
{{item.name}}
</div>
</div>
<div class="clear-float"></div>
</div>
</div>
</div>
</div>
<tabbottom activeTabItem="MAIN"/>
</div>
</template>
<script type="text/ecmascript-6">
import { plusReady } from 'assets/js/plusReady'
import { MyLocalStorage, checkADFlag, checkLoginFlag } from 'assets/js/utils'
import { LOGIN_FLAG, AD_FLAG, INDEX_ACTIVETAB } from 'assets/js/storageConst'
import { countByBfzt } from '@/api/well'
import { countByJobStatus } from '@/api/job'
import { registerGetui } from '@/api/login'
export default {
name:'layout',
data () {
return {
iconWell: require('@/assets/icons/icon-well.png'),
iconAlarm: require('@/assets/icons/icon-alarm.png'),
iconGuard: require('@/assets/icons/icon-guard.png'),
wellCount:[
{
count:'--',
name:'已撤防',
type:'span-count alarm'
},
{
count:'--',
name:'已布防',
type:'span-count warning'
},
{
count:'--',
name:'全部',
type:'span-count success'
}
],
jobCount:[
{
count:'--',
name:'待处理',
type:'span-count alarm'
},
{
count:'--',
name:'待确认',
type:'span-count warning'
},
{
count:'--',
name:'处理中',
type:'span-count primary'
},
{
count:'--',
name:'已完成',
type:'span-count success'
}
]
}
},
created () {
console.log("created")
plusReady(this.plusReady)
// this.setLocalStorage() // 储存本地存储
this.fetchData()
},
activated(){
const cid = this.$store.getters.cid
console.log('cid:'+cid)
if(cid && cid!=''){
registerGetui(cid).then(res=>{
if(res.code==200){
console.log('registerGetui success!')
}
})
}
this.fetchData()
},
methods: {
resumeCallback () {
Toast({
message: '欢迎回来',
position: 'bottom',
duration: 3000
})
let login_flag = checkLoginFlag()
if (login_flag) {
this.login()
} else {
MyLocalStorage.Cache.set(LOGIN_FLAG, true, 999999) // 切换回来登陆保持时长无限
}
},
pauseCallback () {
setTimeout(() => {
MyLocalStorage.Cache.set(LOGIN_FLAG, true, 6000) // 切换至后台登陆保持10分钟
}, 1000)
},
//获取数据
fetchData(){
//统计布防撤防井数
countByBfzt().then(response => {
this.wellCount = [
{
count:response.data.cfWell,
name:'已撤防',
type:'span-count alarm'
},
{
count:response.data.bfWell,
name:'已布防',
type:'span-count warning'
},
{
count:response.data.total,
name:'全部',
type:'span-count success'
}
]
})
countByJobStatus().then(response => {
this.jobCount = [
{
count:response.data.beforeGet,
name:'待处理',
type:'span-count alarm'
},
{
count:response.data.beforeConfirm,
name:'待确认',
type:'span-count warning'
},
{
count:response.data.inHandle,
name:'处理中',
type:'span-count primary'
},
{
count:response.data.over,
name:'已完成',
type:'span-count success'
}
]
})
},
changetab(tabName){
if(tabName=='well'){
this.$router.push({name: 'wellManage'})
}else if(tabName=='job'){
this.$router.push({name: 'job', query:{tab:'1'}})
}
},
openBfcf(){
this.$router.push({name: 'wellBfcf', query:{bfzt:'', bfztName:'全部'}})
},
clickWellManage(name){
if(name == '已布防'){
this.$router.push({name: 'wellBfcf', query:{bfzt:'1', bfztName:'布防'}})
}else if(name=='已撤防'){
this.$router.push({name: 'wellBfcf', query:{bfzt:'0', bfztName:'撤防'}})
}else{
this.$router.push({name: 'wellBfcf', query:{bfzt:'', bfztName:'全部'}})
}
},
clickJobManage(name){
if(name=='待处理'){
this.$router.push({name: 'job', query:{tab:'1'}})
}else if(name=='待确认'){
this.$router.push({name: 'job', query:{tab:'2'}})
}else if(name=='处理中'){
this.$router.push({name: 'job', query:{tab:'3'}})
}else if(name=='已完成'){
this.$router.push({name: 'job', query:{tab:'4'}})
}
}
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
.index-container{
width 100vh
.index-func-div{
height 15vh
padding 3vh 12.5vw
background-color #fdfdfd
border-bottom 1px solid #e8e8e8
.index-func-btn-div{
width 25vw
float left
text-align center
.btn-icon{
height 17vw
width 17vw
position relative
margin 2vw auto
background-color #1d55c6
vertical-align: middle
-webkit-border-radius: 17vw
-moz-border-radius: 17vw
border-radius: 17vw
}
.btn-icon img{
width 12vw
height 12vw
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
vertical-align: middle
margin auto
}
.btn-title{
font-size 0.9em
}
}
}
.index-card{
width 97vw
height 25vh
margin 1.5vh 1.5vw
background-color #ffffff
border: 1px solid #f0f0f0
border-radius 4px
.card-header{
margin-top:3vh
margin-left: 20vw
margin-right: 20vw
padding-bottom 4px
border-bottom 1px solid #f0f0f0
text-align center
}
.card-body{
margin-top:3vh
padding 0vw 2vw
.static-span{
float: left;
text-align center
margin:2vw 0vw
.span-count{
font-size 2.2rem
margin-bottom 1vh
font-family: agencry
}
}
}
.divid3 {
padding:0vw 11vw
.static-span{
width:24vw
}
}
.divid4 .static-span{
width:22.5vw
}
}
.success{
color: #13ad00
}
.warning{
color: #ffca18
}
.alarm{
color: #ff6f70
}
.primary{
color: #1d55c6
}
}
</style>
