You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
2.2 KiB
123 lines
2.2 KiB
<template>
|
|
<div class="cq">
|
|
<div class="cq__title">出勤情况</div>
|
|
<div class="water-level-chart-details">
|
|
总人数<span>{{totalPerson}}</span>人
|
|
</div>
|
|
<div class="chart-container">
|
|
<dv-active-ring-chart v-if="show" :config="config" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getKqData} from "@/api/kban";
|
|
|
|
export default {
|
|
name:'Cq',
|
|
data () {
|
|
return {
|
|
show:false,
|
|
totalPerson:0,
|
|
config: {
|
|
radius: '60%',
|
|
activeRadius: '63%',
|
|
data: [],
|
|
digitalFlopStyle: {
|
|
fontSize: 20
|
|
}
|
|
},
|
|
delay:null,
|
|
}
|
|
},
|
|
mounted() {
|
|
// this.$socket.open()
|
|
// this.wsSubscribe()
|
|
},
|
|
created(){
|
|
this.getData();
|
|
this.delay=setInterval(this.getData,30000)
|
|
},
|
|
sockets:{},
|
|
methods:{
|
|
getData(){
|
|
getKqData().then(res=>{
|
|
this.show=false
|
|
const data=[]
|
|
this.totalPerson=0
|
|
Object.keys(res.data).forEach(key=>{
|
|
const item=res.data[key]
|
|
data.push({name:key,value:item})
|
|
this.totalPerson+=item
|
|
})
|
|
this.config.data=data
|
|
this.show=true
|
|
})
|
|
},
|
|
clear(){
|
|
clearInterval(this.delay)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.cq{
|
|
width: 369px;
|
|
height: 294px;
|
|
background: url('../../../assets/kban/cqbg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 62px;
|
|
margin-top: 14px;
|
|
text-align: center;
|
|
|
|
.cq__title{
|
|
width: 231px;
|
|
height: 41px;
|
|
background: url('../../../assets/kban/cltitle.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
padding: 12px 26px;
|
|
margin-left: 71px;
|
|
}
|
|
|
|
.water-level-chart-details {
|
|
height: 10%;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 17px;
|
|
align-items: flex-end;
|
|
|
|
span {
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
color: #58a1ff;
|
|
margin: 0 5px;
|
|
margin-bottom: -5px;
|
|
}
|
|
}
|
|
|
|
.chart-container {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.dv-active-ring-chart {
|
|
width: 300px;
|
|
height: 300px;
|
|
margin-top: -40px;
|
|
|
|
ellipse {
|
|
stroke: transparent !important;
|
|
}
|
|
|
|
text {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|