hz-zhhq-app/pages/visitStatistics/visitStatistics.vue

777 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<view class="container" >
<view class="banner-box">
<image src="/static/imgs/visitor.png" mode=""></image>
<!-- <image v-if="currentTabIndex == 4" src="/static/imgs/visitor.png" mode=""></image> -->
</view>
<view class="main">
<view class="tab-box">
<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''" @click="currentTabIndex = 0">出入统计</view>
<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''" @click="currentTabIndex = 1">统计明细</view>
<view class="tab-item" :class="currentTabIndex == 2 ? 'active_tab' : ''" @click="currentTabIndex = 2">通行记录</view>
</view>
<!-- 访客统计-->
<view class="reservation-box" style="background-color: #fff;" v-if="currentTabIndex == 0">
<view class="form-item searchv">
<picker class="time " mode="date" @change="bindDateChange">
<view class="">{{seachStartdate}}</view>
</picker>
<text class="timecenter">至</text>
<picker class="time " mode="date" @change="seachEnddateChange">
<view class="">{{seachEnddate}}</view>
</picker>
<view class="search" style="height: 60upx;font-size: 26upx;margin-top: 7upx;" @click="searchYjList">搜索</view>
<!-- <image style="width: 5vh;height: 5vh;margin-left: 1vh;" @click="search" src="/static/icons/seach.png" mode=""></image>
-->
</view>
<view class="list-box" v-if="visitTj.length > 0">
<view class="form-item" style="width: 100%;margin: 10px 0px 10px 0px;">
<view class="visitcon w15">序号</view>
<view class="visitcon w25">部门</view>
<view class="visitcon w15">已授权</view>
<view class="visitcon w15">未授权</view>
<view class="visitcon w15">总访客</view>
<view class="visitcon w15">内部</view>
</view>
<view style="padding: 10px 5px 10px 5px;border-top:1px solid #d2d2d2;align-items: center;display: flex;" class="form-item" v-for="(item, index) in visitTj" :key="index" >
<view class="visitcon w15">{{ index+1 }}</view>
<view class="visitcon w25">{{ item.name }}</view>
<view class="visitconContent w15" @click="searchContent(index,1)">{{ item.ty }}</view>
<view class="visitconContent w15" @click="searchContent(index,2)">{{ item.total - item.ty }}</view>
<view class="visitconContent w15" @click="searchContent(index,0)">{{ item.total }}</view>
<view class="visitconContent w15" @click="searchInsideMsgList(index,0)" >{{ item.usertotal }}</view>
</view>
</view>
<content-none v-else :padTop="20" style="padding-bottom: 20vh;"></content-none>
</view>
<!-- 预约记录列表 -->
<view v-else-if ="currentTabIndex == 1" style="background-color: #fff;height: auto;">
<view class="form-item searchv" >
<picker class="time " mode="date" @change="bindMsgDateChange">
<view class="">{{seachListStartdate}}</view>
</picker>
<text class="timecenter">至</text>
<picker class="time " mode="date" @change="seachMsgEnddateChange">
<view class="">{{seachListEnddate}}</view>
</picker>
</view>
<view class="form-item searchv" style="padding:0 20upx; !important;display: flex !important; align-items: center !important;">
<view class="ipt-box select time" style="width: 300upx;">
<picker class="picker" v-if="deptList.length > 0" :range="deptList" @change="changeRerson" range-key="name">
<view>{{ deptList[RersonIndex] }}</view>
</picker>
</view>
<view class="ipt-box select time" style="width: 150upx;margin-left: 2vh; ">
<picker class="picker" v-if="visitState.length > 0" :range="visitState" @change="visitState2" range-key="name">
<view>{{ visitState[visitStateIndex] }}</view>
</picker>
</view>
<view class="search" style="width:160upx;height: 60upx;font-size: 26upx;margin-top: 7upx;" @click="searchVisitList">搜索</view>
</view>
<view class="list-box" v-if="visitlist.length > 0">
<view class="list-item" v-for="(item,index) in visitlist" :key="index"
@click='toDetail("/pages/visitStatistics/visitorAppointment?id="+item.detail_id+"&role=2&userId="+userId)'>
<view class="title">
<text class="line"></text>
<text class="text">访客预约</text>
<text class="status2" v-if="item.first_status==0">待审核</text>
<text class="status" v-if="item.first_status==1">已同意</text>
<text class="status1" v-if="item.first_status==2">已拒绝</text>
<text class="status1" v-if="item.first_status==3">待本人确认</text>
<text class="status1" v-if="item.first_status==4">已取消</text>
</view>
<view class="content">
<view class="info-item">
<view class="fl-text">被访人:</view>
<view class="fr-text">{{item.visited_person_name}}</view>
</view>
<view class="info-item">
<view class="fl-text">被访时间:</view>
<view class="fr-text">{{item.visit_start_time}}</view>
</view>
<view class="info-item">
<view class="fl-text">申请人:</view>
<view class="fr-text">{{item.visitor_name}}</view>
</view>
<view class="info-item">
<view class="fl-text">申请时间:</view>
<view class="fr-text">{{item.apply_time}}</view>
</view>
<!-- <view class="comment-btn" @click.stop="del(item.detail_id,1,index)">删除</view> -->
</view>
</view>
</view>
<content-none v-else :padTop="20" style="padding-bottom: 20vh;"></content-none>
<load-more v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
</view>
<!-- 内部员工通行记录 -->
<view v-else-if="currentTabIndex == 2" style="background-color: #fff;height: auto;">
<view class="form-item searchv" >
<picker class="time " mode="date" @change="seachInsideStartdateChange">
<view class="">{{seachInsideListStartdate}}</view>
</picker>
<text class="timecenter">至</text>
<picker class="time " mode="date" @change="seachInsideEnddateChange">
<view class="">{{seachInsideListEnddate}}</view>
</picker>
</view>
<view class="form-item searchv" style="padding:0 20upx; !important;display: flex !important; align-items: center !important;">
<view class="ipt-box select time" style="width: 300upx;margin-left: 85upx;">
<picker class="picker" v-if="deptList.length > 0" :range="deptList" @change="changeInsideRerson" range-key="name">
<view>{{ deptList[insideDepIndex] }}</view>
</picker>
</view>
<view class="search" style="width:160upx;height: 60upx;font-size: 26upx;margin-top: 7upx;" @click="searchInsideList">搜索</view>
</view>
<view class="list-box" v-if="insideList.length > 0">
<view class="form-item" style="width: 100%;margin: 10px 0px 10px 0px;">
<view class="visitcon w10">序号</view>
<view class="visitcon w15">姓名</view>
<view class="visitcon w25">部门</view>
<view class="visitcon w20">位置</view>
<view class="visitcon w30">通行时间</view>
</view>
<view style="padding: 10px 5px 10px 5px;border-top:1px solid #d2d2d2;align-items: center;display: flex;" class="form-item" v-for="(item, index) in insideList" :key="index" >
<view class="visitcon w10">{{ index+1 }}</view>
<view class="visitcon w15">{{ item.userName }}</view>
<view class="visitcon w25">{{ item.dpName }}</view>
<view class="visitcon w20">{{ item.address }}</view>
<view class="visitcon w30">{{ item.time }}</view>
</view>
</view>
<content-none v-else :padTop="20" style="padding-bottom: 20vh;"></content-none>
<load-more style="display: flex;" v-if="currentTabIndex == 2" :loadingType="insideloadingType" :contentText="contentText"></load-more>
</view>
</view>
</view>
</view>
</template>
<script>
import { getDate, alertTip, callbackRequest, getStorage, regPhone, formatDate } from '@/common/util.js';
import { getAllDept, initWashCar, applyWashCar, getMyWashCarList,greenVisitorStatistics ,greenVisitorStatisticsDetailed,greenGetInsideList} from '@/common/api.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
import datetimePicker from '@/components/dateTime.vue';
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
let currentTime = new Date().getTime();
let millisecond = 24 * 7 * 60 * 60 * 1000;
export default {
data() {
return {
seachStartdate:this.getDay(),
seachEnddate:this.getDay(),
seachListStartdate:this.getDay(),
seachListEnddate:this.getDay(),
seachInsideListStartdate:this.getDay(),
seachInsideListEnddate:this.getDay(),
visitStateIndex:0,
visitlist:[],
visitTj: [],
insideList:[
],
// userId:"9c5146f0ab024c02a3cef933f609bc74",
insideDepIndex:0,
visitState:['全部', '已授权', '未授权'], //状态列表
page: 1,
pageSize: 10,
loadingType: 0, //0-loading前1-loading中2-没有更多了
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了'
},
insideloadingType:0,
userId: getStorage('userInfo').id,
currentTabIndex: 0,
selectedDate: this.getTime(),
chooseDateIndex: 0, //选中的日期
times: [],
chooseTimeIndex: null,
deptList: ["请选择"], //部门列表
RersonIndex: 0
};
},
components: {
loadMore,
contentNone,
datetimePicker
},
onLoad(option) {
this.getRerson();
console.log('--'+this.userId);
this.currentTabIndex = option.currentTabIndex || 0;
// 部门
// this.getDepartment();
if (this.currentTabIndex == 0) {
this.initData();
}
},
watch: {
currentTabIndex: function(newVal, oldVal) {
if (newVal == 1) {
this.page = 1;
this.loadingType = 0;
this.insideloadingType = 0;
// this.getReservationRecord();
} else {
this.initData();
}
}
},
methods: {
open() {
console.log(1111111);
this.$refs.calendar.open();
},
//出入统计页面方法
// 统计页面搜索方法
searchYjList(){
console.log(this.seachStartdate+"--------"+this.seachEnddate);
var oDate1 = new Date(this.seachStartdate);
var oDate2 = new Date(this.seachEnddate);
if(oDate1 > oDate2){
alertTip('开始时间需大于结束时间!');
} else {
this.getRerson();
}
},
//点击跳转到统计明细方法
searchContent(index,type){
this.page=1;
console.log(index+"--------"+type+"==-===="+this.visitTj[index].name);
this.currentTabIndex = 1;//改变标签
this.visitStateIndex = type;//赋值状态
if(this.visitTj[index].name == "合计"){
this.RersonIndex = 0;
}else{
// 获取部门名称下标改变默认值
for(var i = 0;this.deptList.length;i++){
if(this.deptList[i] == this.visitTj[index].name){
this.RersonIndex = i;
break;
}
}
}
this.seachListStartdate = this.seachStartdate ;
this.seachListEnddate = this.seachEnddate,
this.getVisitMsgList(this.deptList[this.RersonIndex],type);
},//点击跳转到通行记录方法
searchInsideMsgList(index,type){
this.insidepage=1;
this.currentTabIndex = 2;
this.insideloadingType= 0;
// this.visitStateIndex = type;
if(this.visitTj[index].name == "合计"){
this.insideDepIndex = 0;
}else{
for(var i = 0;this.deptList.length;i++){
if(this.deptList[i] == this.visitTj[index].name){
this.insideDepIndex = i;
break;
}
}
}
this.seachInsideListStartdate = this.seachStartdate ;
this.seachInsideListEnddate = this.seachEnddate,
this.getInsideMsgList(this.deptList[this.insideDepIndex]);
},
bindDateChange: function(e) {
this.seachStartdate = e.target.value
},
seachEnddateChange: function(e) {
this.seachEnddate = e.target.value
},
//统计明细页面方法
searchVisitList(){
this.page=1;
this.loadingType = 0;
console.log(this.seachStartdate+"--------"+this.seachEnddate);
if(this.visitState[this.visitStateIndex] == "全部"){
this.visitStateIndex = 0;
}else if(this.visitState[this.visitStateIndex] == "已授权"){
this.visitStateIndex = 1;
}else if(this.visitState[this.visitStateIndex] == "未授权"){
this.visitStateIndex = 2;
}
var oDate1 = new Date(this.seachListStartdate);
var oDate2 = new Date(this.seachListEnddate);
if(oDate1 > oDate2){
alertTip('开始时间需大于结束时间!');
} else {
this.getVisitMsgList(this.deptList[this.RersonIndex],this.visitStateIndex);
}
},
getVisitMsgList(dep,type){
let data = {
method: greenVisitorStatisticsDetailed,
data: {"page":this.page,
"startDate":this.seachListStartdate,
"endDate":this.seachListEnddate,
"dep":dep,
"userId":this.userId,
"type":type}
};
callbackRequest(data).then(res => {
if (res.data.returnCode == 1) {
if(this.page == 1){
this.visitlist = res.data.returnData;
}else {
if(res.data.returnData.length > 0){
this.visitlist = [...this.visitlist,...res.data.returnData];
this.loadingType = 0;
}else {
this.loadingType = 2;
}
}
}
});
},
bindMsgDateChange: function(e) {
this.seachListStartdate = e.target.value
},
seachMsgEnddateChange: function(e) {
this.seachListEnddate = e.target.value
},
/**
* 通行记录页面方法
*/
//通行记录搜索方法
searchInsideList(){
this.insideloadingType= 0;
this.insidepage=1;
this.currentTabIndex = 2;
var oDate1 = new Date(this.seachInsideListStartdate);
var oDate2 = new Date(this.seachInsideListEnddate);
if(oDate1 > oDate2){
alertTip('开始时间需大于结束时间!');
} else {
this.getInsideMsgList(this.deptList[this.insideDepIndex]);
}
},
//
getInsideMsgList(depname){
let data = {
method: greenGetInsideList,
data: {"page":this.insidepage,
"startDate":this.seachInsideListStartdate,
"endDate":this.seachInsideListEnddate,
"userId":this.userId,
"dep":depname}
};
callbackRequest(data).then(res => {
if (res.data.returnCode == 1) {
if(this.insidepage == 1){
this.insideList = res.data.returnData;
}else {
if(res.data.returnData.length > 0){
this.insideList = [...this.insideList,...res.data.returnData];
this.insideloadingType = 0;
}else {
this.insideloadingType = 2;
}
}
}
});
},
seachInsideStartdateChange: function(e) {
this.seachInsideListStartdate = e.target.value
},seachInsideEnddateChange: function(e) {
this.seachInsideListEnddate = e.target.value
},
// 工具方法
getTime() {
var date1 = new Date();
var year = date1.getFullYear();
var month = date1.getMonth() + 1;
var day = date1.getDate();
var hours = date1.getHours();
var minutes = date1.getMinutes();
var seconds = date1.getSeconds();
// return year+"年"+month+"月"+day+"日"+hours+":"+minutes+":"+seconds
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
},
getDay() {
var date1 = new Date();
var year = date1.getFullYear();
var month = date1.getMonth() + 1;
if(month<10){
month = "0"+month;
}
var day = date1.getDate();
// if(day<10){
// day = "0"+day;
// }
return year + '-' + month + '-' + day;
},
initData() {
},
//获取访客统计
getRerson() {
let data = {
method: greenVisitorStatistics,
data: {"userId":this.userId,
"startDate":this.seachStartdate,
"endDate":this.seachEnddate}
};
callbackRequest(data).then(res => {
if (res.data.returnCode == 1) {
this.visitTj = res.data.returnData.visitlist;
if(res.data.returnData.depList.length>0){
this.deptList = res.data.returnData.depList;
}
}
});
},
toDetail(url){
uni.navigateTo({
url
})
},
// //获取ton记录列表
// getReservationRecord() {
// let params = {
// method: getMyWashCarList,
// data: {
// pageSize: this.pageSize,
// pageNum: this.page,
// userId: this.userId
// }
// };
// },
//选择日期
switchTab(index) {
this.chooseDateIndex = index;
this.initData();
},
//选择部门
changeDepartment(e) {
this.departmentIndex = e.detail.value;
},
//选择出车事由
changeRerson(b) {
this.RersonIndex = b.detail.value;
},changeInsideRerson(b){
this.insideDepIndex = b.detail.value;
},
//选择访客状态
visitState2(b) {
this.visitStateIndex = b.detail.value;
}
},
onReachBottom() {
if(this.currentTabIndex == 1){
if (this.loadingType !== 0 || this.currentTabIndex != 1) {
return;
}
this.loadingType = 1;
this.page = this.page + 1;
this.getVisitMsgList(this.deptList[this.RersonIndex],this.visitStateIndex);
}else if(this.currentTabIndex == 2){
if (this.insideloadingType !== 0 || this.currentTabIndex != 2 ) {
return;
}
this.insideloadingType = 1;
this.insidepage = this.insidepage + 1;
this.getInsideMsgList(this.deptList[this.insideDepIndex]);
}
}
};
</script>
<style lang="scss">
@import '@/static/css/common.scss';
.searchv{
margin-top: 0upx;
text-align: center;
}
.search{
margin-top: 20upx;
display:inline-block;
background-color: #00C277;
color: #fff;
margin-left:2vh;
font-size: 2vh;
border-radius: 1vh;
padding: 1vh 2vh 1vh 2vh;
}
.timecenter{
font-size: 26upx;
margin-left: 10upx;
margin-right: 10upx;
}
.time{
margin-top: 10upx;
font-size: 28upx;
display:inline-block;
padding: 5px;
border: 1px solid #c2c2c2;
}
.visitcon{
display:inline-block;
text-align: center;
font-size: 14px;
}
.visitconContent{
text-decoration:underline;
display:inline-block;
text-align: center;
font-size: 14px;
}
.w40{
width: 40%;
}
.w25{
width: 25%;
}
.w10{
width: 10%;
}
.w15{
width: 15%;
}
.w20{
width: 20%;
}
.w30{
width: 30%;
}
.w35{
width: 35%;
}
.w45{
width: 45%;
}
.container{
position:relative;
overflow:hidden;
background: #f8f8f8;
min-height:100vh;
.banner-box{
width:100%;
height:240upx;
position:absolute;
top:0;
left:0;
image{
width:100%;
height:100%;
}
}
.main{
margin:172upx 40upx 0;
position:relative;
z-index:10;
.tab-box {
overflow: hidden;
border-radius: 10upx 10upx 0 0;
background: rgba(132, 149, 167, 0.8);
height: 70upx;
.tab-item {
float: left;
height: 70upx;
width: 33.33%;
font-size: 30upx;
color: #e5f6ff;
text-align: center;
line-height: 70upx;
}
.active_tab {
background: #fff;
color: #333;
border-radius: 10upx 10upx 0 0;
font-weight: bold;
}
}
.form-box{
padding:20upx 30upx 0upx;
margin-bottom: 20upx;
background: #fff;
.form-item{
overflow:hidden;
border-bottom:1px solid #eee;
padding:30upx 0;
.label{
float:left;
width:150upx;
font-size:28upx;
color:#333;
font-weight:bold;
line-height:50upx;
}
.ipt-box{
margin-left:160upx;
input{
width:100%;
height:50upx;
line-height:50upx;
font-size:26upx;
color:#666;
}
.pic{
width:60upx;
height:60upx;
line-height: 80upx;
}
}
.select{
.arrow{
float:right;
width:16upx;
height:29upx;
margin-top:10upx;
}
input{
width:70%;
}
}
.jian{
width: 50upx;
height:50upx;
margin-left: 280upx;
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
.picker {
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
}
}
}
.sure-btn{
width:100%;
height:80upx;
font-size:28upx;
color:#fff;
text-align:center;
line-height:80upx;
border-radius:8upx;
background: #0066CC;
background:linear-gradient(to right, #ffc200,#ff9000);/*设置按钮为渐变颜色*/
margin-top:50upx;
}
}
.list-box{
.list-item{
background: #fff;
margin-bottom:10upx;
.title{
border-bottom:1px solid #eee;
padding:20upx 10upx;
overflow:hidden;
line-height:40upx;
.line{
display:inline-block;
width:10upx;
height:32upx;
background: $assistColor;
margin-top:4upx;
}
.text{
display:inline-block;
font-size:28upx;
color:#444;
font-weight:bold;
margin-left:10upx;
vertical-align:top;
}
.status{
font-size:26upx;
color:$assistColor;
float:right;
}
.status1{
font-size:26upx;
color:#5063c3;
float:right;
}
.status2{
font-size:26upx;
color:red;
float:right;
}
}
.content{
padding:10upx 20upx;
// padding:10upx 10upx 60upx 10upx;
.info-item{
overflow: hidden;
padding-bottom:10upx;
.fl-text{
float:left;
font-size:26upx;
color:#444;
font-weight:bold;
line-height:40upx;
}
.fr-text{
float:right;
font-size:26upx;
color:#666;
line-height:40upx;
}
}
}
}
.comment-btn {
float: right;
font-size: 24upx;
border-radius: 10upx;
color: #fff;
line-height: 50upx;
text-align: center;
min-width: 140upx;
background-color: #00c277;
}
}
}
}
</style>