<!--
* @Description: 签出置忙时间统计
* @Author: 王晓颖
* @Date: 2020-04-24
-->
<template>
<app-container>
<div>
<search-area :need-clear="false" :need-search-more="false" :size="size" type="default" search-more-type="default" @search="search">
<!--一般查询条件-->
<search-item>
<el-date-picker
v-model="timeRange"
:size="size"
:clearable="false"
type="datetimerange"
range-separator="至"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="查询开始日期"
end-placeholder="查询结束时间"/>
</search-item>
<search-item>
<el-select v-model="listQuery.userId" :size="size" placeholder="坐席">
<el-option v-for="item in userList" :label="item.name" :value="item.id"/>
</el-select>
</search-item>
<search-item>
<span class="level-txt">工作时间：</span>
<el-time-picker
v-model="workTime"
:size="size"
:clearable="false"
is-range
range-separator="至"
value-format="HH:mm"
format="HH:mm"
start-placeholder="开始时间"
end-placeholder="结束时间"/>
</search-item>
<search-item>
<span class="level-txt">休息时间：</span>
<el-time-picker
v-model="breakTime"
:size="size"
:clearable="false"
is-range
range-separator="至"
value-format="HH:mm"
format="HH:mm"
start-placeholder="开始时间"
end-placeholder="结束时间"/>
</search-item>
</search-area>
<normal-table
:data="data"
:head="tableOption.head"
:size="size"
:query="listQuery"
:need-page="false"
:total="total"
:columns="columns"
:list-loading="listLoading"
:options="tableOption.options"
:tools-option="tableOption.toolsOption"
@change="changePage"/>
</div>
</app-container>
</template>
<script>
import NormalTable from '@/components/NomalTable/index'
import SearchArea from '../../../components/SearchArea/SearchArea'
import SearchItem from '../../../components/SearchArea/SearchItem'
import AppContainer from '../../../components/layout/AppContainer'
import { getUserSimpleList } from '@/api/system/user'
import { getTodayZero, getToday } from '@/utils/dateutils'
import { outBusyStatistics } from '@/api/statistics'
export default {
name: 'CaseStatisticYear',
components: { AppContainer, SearchItem, SearchArea, NormalTable },
data() {
return {
listQuery: {
userId: '',
startTime: '',
endTime: '',
workStartTime: '',
workEndTime: '',
breakStartTime: '',
breakEndTime: ''
},
timeRange: [], // 查询日期范围
workTime: ['08:30', '17:30'], // 工作时间范围
breakTime: ['12:00', '14:00'], // 休息时间范围
columns: [
{
text: '日期',
value: 'date'
},
{
text: '签出时间段记录',
value: 'outRecords'
},
{
text: '置忙时间段记录',
value: 'busyRecords'
},
{
text: '总签出时长（分钟）',
value: 'outTime'
},
{
text: '总置忙时长（分钟）',
value: 'busyTime'
}
], // 显示列
data: [], // 列表数据
total: 0, // 数据总数
listLoading: true, // 列表加载动画
tableOption: {
head: {
show: false, // 是否需要标题栏，
text: '数据列表' // 标题名称
},
options: {
needIndex: false // 是否需要序号列
},
toolsOption: {
selectColumns: false, // 是否需要筛选列
refresh: false // 是否需要刷新按钮
}
}, // 表格属性
size: 'small',
userList: [] // 用户列表
}
},
created() {
this.timeRange = [getTodayZero(), getToday()]
this.fetchUserList()
this.fetchData()
},
methods: {
search() {
this.fetchData()
},
fetchData() {
this.listLoading = true
this.listQuery.workStartTime = this.workTime[0]
this.listQuery.workEndTime = this.workTime[1]
this.listQuery.breakStartTime = this.breakTime[0]
this.listQuery.breakEndTime = this.breakTime[1]
if (this.timeRange.length === 2) {
this.listQuery.startTime = this.timeRange[0]
this.listQuery.endTime = this.timeRange[1]
}
outBusyStatistics(this.listQuery).then(response => {
if (response.code === 200) {
this.listLoading = false
this.list = response.data
this.total = response.data.length
// this.data = [
// { 'date': '2020-04-24', 'outRecords': '07:00-07:05;07:10-07:15;', 'busyRecords': '07:00-07:05;07:10-07:15;', 'outTime': '124', 'busyTime': '15' },
// { 'date': '2020-04-24', 'outRecords': '07:00-07:05;07:10-07:15;', 'busyRecords': '07:00-07:05;07:10-07:15;', 'outTime': '124', 'busyTime': '15' },
// { 'date': '2020-04-24', 'outRecords': '07:00-07:05;07:10-07:15;', 'busyRecords': '07:00-07:05;07:10-07:15;', 'outTime': '124', 'busyTime': '15' },
// { 'date': '2020-04-24', 'outRecords': '07:00-07:05;07:10-07:15;', 'busyRecords': '07:00-07:05;07:10-07:15;', 'outTime': '124', 'busyTime': '15' },
// { 'date': '2020-04-24', 'outRecords': '07:00-07:05;07:10-07:15;', 'busyRecords': '07:00-07:05;07:10-07:15;', 'outTime': '124', 'busyTime': '15' }
// ]
}
})
},
// 获取坐席列表
fetchUserList() {
const params = {
roleTips: 'receiver,monitor'
}
getUserSimpleList(params).then(response => {
if (response.code === 200) {
this.userList = response.data
if(this.userList.length>0){
this.listQuery.userId = this.userList[0].id
}
}
})
},
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
changePage(val) {
if (val && val.size) {
this.listQuery.limit = val.size
}
if (val && val.page) {
this.listQuery.offset = val.page
}
this.fetchData()
},
showDetail() {
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.table-title{
text-align: center;
line-height: 2;
font-size:18px;
font-weight: 700;
background-color: #f0f0f0;
}
.level-txt{
margin-left:20px;
color: #909399;
font-size:15px;
line-height: 32px
}
</style>
