<template>
<div class="app-container">
<div class="statistic-container">
<el-row class="chart-tools">
<el-col :span="19">
<span class="chart-tool-button" @click="changeDate('today')">今日</span>
<span class="chart-tool-button" @click="changeDate('yesterday')">昨日</span>
<span class="chart-tool-button" @click="changeDate('sevendays')">最近7日</span>
<span class="chart-tool-button" @click="changeDate('lastmonth')">最近30日</span>
<el-date-picker
v-model="timeRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
size="mini"
@change="fetchData"/>
</el-col>
<el-col :span="5" >
<el-select v-model="listQuery.doorCode" size="mini" placeholder="请选择门禁" @change="fetchData">
<el-option
v-for="item in doorList"
:key="item.id"
:label="item.doorName"
:value="item.doorCode"/>
</el-select>
</el-col>
</el-row>
<el-row>
<el-col :span="12" class="chart-body" >
<div class="chart-body-title">各部门进出记录统计</div>
<div class="chart-body-select">
<span class="select-label">监控指标 ：</span>
<el-select v-model="inoutType" class="select-input" size="small" @change="fetchDeptStatistic">
<el-option
v-for="item in chooseIndex"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</div>
<pie-chart :list="chartList"/>
</el-col>
<el-col :span="12" class="chart-body">
<div class="chart-body-title">人员进出记录统计</div>
<div class="chart-body-select">
<el-form ref="selectForm" :inline="true" class="form-container">
<el-row>
<el-col :span="12">
<el-form-item class="selectForm-container-item" label="部门:">
<dept-select v-model="deptId" :need-top="false" size="small" placeholder="请选择部门" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="selectForm-container-item" label="员工:">
<el-select v-model="personId" :disabled="!allowChoose" placeholder="全部" size="small" @change="fetchPersonStatistic">
<el-option
v-for="item in personList"
:key="item.id"
:label="item.name"
:value="item.id"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<bar-chart :data="chartData"/>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import { getStatisticByDept, getStatisticByPerson } from '@/api/statistics'
import { getDoorSourceList } from '@/api/query'
import { getDayTime } from '@/utils/dateutils'
import { getPersonListAll } from '@/api/person'
import DeptSelect from '@/components/DeptSelect/index'
import PieChart from './pieChart'
import BarChart from './barChart'
export default {
name: 'AlarmStaticsByDept',
components: { BarChart, PieChart, DeptSelect },
data() {
return {
chartSettings: {
labelMap: {
'inoutType': '进出类型',
'num': '进出数量'
},
itemStyle: {
'barCategoryGap': 5
},
demension: 'inoutType',
barWidth: 15
},
extend: {
series: {
label: { show: true, position: 'top' },
itemStyle: {
normal: {
barBorderRadius: [3, 3, 0, 0]
}
},
barMaxWidth: 35
}
},
listQuery: {
doorCode: '', // 门禁编号
beginTime: '', // 开始时间
endTime: '' // 结束时间
},
inoutType: '', // 进出类型
personId: '', // 员工id
deptId: '', // 部门
chooseIndex: [
{
value: '',
label: '全部'
}, {
value: '1',
label: '进门'
}, {
value: '0',
label: '出门'
}
],
timeRange: [],
doorList: [],
personList: [],
showDeviceType: true,
chartData: {
columns: ['inoutType', 'num'],
rows: []
},
chartList: [],
allowChoose: false,
dataEmpty: false,
chooseshow: false,
chartshow: false,
loading1: false,
loading2: false
}
},
watch: {
timeRange(val) {
if (val && val.length > 0) {
this.listQuery.beginTime = val[0]
this.listQuery.endTime = val[1]
this.fetchData() // 时间改变刷新数据
} else {
this.listQuery.beginTime = ''
this.listQuery.endTime = ''
}
},
deptId(val) {
if (val !== '') {
this.allowChoose = true
this.personId = ''
this.getPersonList()
this.fetchPersonStatistic()
} else {
this.fetchPersonStatistic()
this.allowChoose = false
}
}
},
mounted() {
this.getDoorSource()
this.fetchData()
},
activated() {
this.fetchData()
},
methods: {
// 获取统计数据
fetchData() {
console.log('this.fetchData')
this.fetchDeptStatistic()
this.fetchPersonStatistic()
},
// 获取部门统计结果
fetchDeptStatistic() {
const query1 = {
doorCode: this.listQuery.doorCode, // 门禁编号
beginTime: this.listQuery.beginTime, // 开始时间
endTime: this.listQuery.endTime, // 结束时间
inoutType: this.inoutType // 进出类型
}
this.loading1 = true
getStatisticByDept(query1).then(response => {
this.chartList = response.data
this.loading1 = false
})
},
fetchPersonStatistic() {
const query2 = {
doorCode: this.listQuery.doorCode, // 门禁编号
beginTime: this.listQuery.beginTime, // 开始时间
endTime: this.listQuery.endTime, // 结束时间
personId: this.listQuery.personId
}
query2.deptId = this.deptId
query2.personId = this.personId
// 获取个人统计结果
this.loading2 = true
getStatisticByPerson(query2).then(response => {
this.chartData.rows = response.data
this.loading2 = false
})
},
// 获取门禁列表
getDoorSource() {
getDoorSourceList().then(response => {
const doorAll = { doorCode: '', doorName: '全部' }
this.doorList = [doorAll, ...response.data]
})
},
getPersonList() {
getPersonListAll().then(response => {
const personAll = { id: '', name: '全部' }
this.personList = [personAll, ...response.data]
})
},
changeDate(date) {
let beginTime, endTime
if (date === 'today') {
beginTime = getDayTime(new Date().getTime())
endTime = new Date()
this.timeRange = [beginTime, endTime]
} else if (date === 'yesterday') {
beginTime = getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000)
endTime = getDayTime(new Date().getTime())
} else if (date === 'sevendays') {
beginTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
endTime = new Date()
} else if (date === 'lastmonth') {
beginTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
endTime = new Date()
}
this.timeRange = [beginTime.Format('yyyy-MM-dd hh:mm:ss'), endTime.Format('yyyy-MM-dd hh:mm:ss')]
this.fetchData()
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
padding: 5px 10px 10px 10px;
.statistic-container{
padding:0px;
border: 1px solid #d3dce6;
.chart-tools{
background-color: #f2f2f2;
line-height: 35px;
padding-left: 10px;
padding-right: 5px;
.chart-tool-text{
padding: 5px;
line-height: 16px;
margin-top:5px;
font-size:13px;
}
.chart-tool-button{
padding: 5px;
line-height: 16px;
margin-top:5px;
font-size:13px;
}
.chart-tool-button:hover{
background-color: #8cc5ff;
cursor: pointer;
color:white
}
.chart-tool-button:active{
background-color: #8cc5ff;
color:white
}
.editor--datetimerange.el-input__inner{
width: 300px;
}
}
.chart-title{
margin: auto;
text-align: center;
margin-top: 15px;
}
}
.chart-body{
padding:15px;
.chart-body-title {
font-size:22px;
text-align: center;
background-color: white;
padding-top: 20px;
}
.chart-body-select{
margin-top:20px;
text-align: center;
.select-label{
font-size: 15px;
color: #606266;
line-height: 40px;
font-weight:500;
padding: 0 6px 0 0
}
}
}
}
</style>
