374 lines
8.9 KiB
Vue
374 lines
8.9 KiB
Vue
|
<template>
|
|||
|
|
<view class="recordsList">
|
|||
|
|
|
|||
|
|
<view style="height: 97vh;">
|
|||
|
|
<u-card>
|
|||
|
|
<view style="padding:0 8px">
|
|||
|
|
<u--form labelWidth="150rpx" :model="policeStation">
|
|||
|
|
<u-form-item label="派出所:">
|
|||
|
|
<view @click="addStation" width="100px">
|
|||
|
|
<view class="dataUserunit" :style="{color: policeStation.station ||'#c2cad2'}" name="unit"
|
|||
|
|
v-model="policeStation.station">{{policeStation.station || "请输入派出所"}}</view>
|
|||
|
|
</view>
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item label="学校:">
|
|||
|
|
<view @click="addSchool">
|
|||
|
|
<view class="dataUserunit" :style="{color: policeStation.school ||'#c2cad2'}" name="unit"
|
|||
|
|
v-model="policeStation.school">{{policeStation.school || "请输入学校"}}</view>
|
|||
|
|
</view>
|
|||
|
|
</u-form-item>
|
|||
|
|
</u--form>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="disp">
|
|||
|
|
<u-button @click="addsearch" type="primary" size="small" :plain="true" :hairline="true"
|
|||
|
|
text="搜索"></u-button>
|
|||
|
|
<u-button @click="onreset" type="primary" size="small" :plain="true" :hairline="true"
|
|||
|
|
text="重置"></u-button>
|
|||
|
|
</view>
|
|||
|
|
<u-picker itemHeight="75" @confirm="pickerConfrm" :show="stationShowunit"
|
|||
|
|
:columns="stationunitColums" keyName="label" @cancel="stationShowunit = false"></u-picker>
|
|||
|
|
<u-picker itemHeight="75" @confirm="schoolpickerConfrm" :show="schoolShowunit"
|
|||
|
|
:columns="schoolnunitColums" keyName="label" @cancel="schoolShowunit = false"></u-picker>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</u-card>
|
|||
|
|
|
|||
|
|
<scroll-view style="height:calc(100vh)" :scroll-y="showAllcolor" :scroll-top="scrollcolor"
|
|||
|
|
upper-threshold="3" @scrolltolower="scrolltolower" @scroll="scroll" @scrolltoupper="scrolltoupper">
|
|||
|
|
<view>
|
|||
|
|
<u-card>
|
|||
|
|
<view slot="body" v-if="clockInList.length">
|
|||
|
|
<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0"
|
|||
|
|
v-for="(item,index) in clockInList" :key="index" >
|
|||
|
|
<view style="width: 100px;height: 100px;margin-right: 34rpx;" >
|
|||
|
|
<image @click="imagebig(item.imageUrls)" style="width: 100%;height: 100%;" :src="item.imageUrls?item.imageUrls:'../../static/school/home_nodata.png'"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="bodyItem">
|
|||
|
|
<view class="bodyIndex">
|
|||
|
|
<span>所属派出所:</span>
|
|||
|
|
<span>{{item.borough}}</span>
|
|||
|
|
<span>警务区:</span>
|
|||
|
|
<span style="font-weight: 700;">{{item.detachment}}</span>
|
|||
|
|
</view>
|
|||
|
|
<view class="bodyIndex">
|
|||
|
|
<span>用户类型:</span>
|
|||
|
|
<span style="font-weight: 700;">{{item.personType === 'guarder'?'保安人员':item.personType === 'police.manager'?'护校警员':item.personType === 'school.manager'?'教育部门':'志愿者'}}</span>
|
|||
|
|
<span>用户名称:</span>
|
|||
|
|
<span style="color: red;">{{item.personName}}</span>
|
|||
|
|
</view>
|
|||
|
|
<view class="bodyIndex">
|
|||
|
|
<span>打卡时间:</span>
|
|||
|
|
<span style="color: red;">{{item.signTimestamp}}</span>
|
|||
|
|
</view>
|
|||
|
|
<view class="bodyIndex">
|
|||
|
|
<span>学校名称:</span>
|
|||
|
|
<span style="color: red;">{{item.station}}</span>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<u-loadmore :status="statucolor" fontSize="24" />
|
|||
|
|
</view>
|
|||
|
|
<view class="availabel" v-else>
|
|||
|
|
<!-- 暂无数据 -->
|
|||
|
|
<image src="../../static/school/availabel.png"></image>
|
|||
|
|
</view>
|
|||
|
|
</u-card>
|
|||
|
|
<u-overlay :show="showUrl" @click="showUrl = false">
|
|||
|
|
<view class="warp">
|
|||
|
|
<movable-area :scale-area="true" style="width: 100vh;">
|
|||
|
|
<movable-view direction="all" style="width: 348px; height: 300px;" @scale="onScale" scale="true"
|
|||
|
|
scale-min="1" scale-max="4" :scale-value="scale" :x="1" :y="10">
|
|||
|
|
<image class="rect" :src="showUrlList" mode="widthFix"></image>
|
|||
|
|
</movable-view>
|
|||
|
|
</movable-area>
|
|||
|
|
</view>
|
|||
|
|
</u-overlay>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
mapGetters
|
|||
|
|
} from 'vuex';
|
|||
|
|
import {
|
|||
|
|
getdetaitList,
|
|||
|
|
|
|||
|
|
getBoroughList,
|
|||
|
|
getstationList,
|
|||
|
|
getsignevent
|
|||
|
|
} from '@/api/login.js'
|
|||
|
|
import {
|
|||
|
|
Time,
|
|||
|
|
timeFormat
|
|||
|
|
} from '@/utils/index.js';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
showUrl: false,
|
|||
|
|
showUrlList:'',
|
|||
|
|
current: 0,
|
|||
|
|
index: 10,
|
|||
|
|
scrollTop: 0,
|
|||
|
|
showAllcolor: true,
|
|||
|
|
scrollcolor: 0,
|
|||
|
|
|
|||
|
|
statucolor: 'loadmore',
|
|||
|
|
clockin: 0,
|
|||
|
|
|
|||
|
|
clockInList: [],
|
|||
|
|
policeStation: {
|
|||
|
|
station: '',
|
|||
|
|
school: ''
|
|||
|
|
},
|
|||
|
|
stationShowunit: false,
|
|||
|
|
stationunitColums: [],
|
|||
|
|
schoolShowunit: false,
|
|||
|
|
schoolnunitColums: []
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created(){
|
|||
|
|
this.onCurrent()
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 拿取vuex数据
|
|||
|
|
...mapGetters({
|
|||
|
|
schoolInfo: 'users/getschoolList',
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
// 星级
|
|||
|
|
// this.getdetaitsStar()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
|
|||
|
|
// 派出所数据
|
|||
|
|
getBoroughLists() {
|
|||
|
|
const that = this;
|
|||
|
|
getBoroughList({
|
|||
|
|
brigade: '长沙芙蓉区'
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
let matter = res.data
|
|||
|
|
.filter((v) => v.remark && v.borough)
|
|||
|
|
.map((res) => ({
|
|||
|
|
id: res.borough,
|
|||
|
|
label: res.remark
|
|||
|
|
}));
|
|||
|
|
that.stationunitColums = [matter];
|
|||
|
|
})
|
|||
|
|
.catch((error) => {});
|
|||
|
|
},
|
|||
|
|
addStation() {
|
|||
|
|
this.stationShowunit = true
|
|||
|
|
this.getBoroughLists()
|
|||
|
|
},
|
|||
|
|
onreset() {
|
|||
|
|
this.policeStation.station = ''
|
|||
|
|
this.policeStation.school = ''
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '加载中...'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.getsigneventList()
|
|||
|
|
uni.hideLoading()
|
|||
|
|
}, 1000)
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
pickerConfrm(e) {
|
|||
|
|
this.policeStation.station = e.value[0].label
|
|||
|
|
this.stationShowunit = false
|
|||
|
|
},
|
|||
|
|
addsearch() {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '加载中...'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.getsigneventList()
|
|||
|
|
uni.hideLoading()
|
|||
|
|
}, 1000)
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
stationList() {
|
|||
|
|
const that = this;
|
|||
|
|
const unitList = {
|
|||
|
|
brigade: '长沙芙蓉区',
|
|||
|
|
borough: that.policeStation.station
|
|||
|
|
};
|
|||
|
|
getstationList(unitList)
|
|||
|
|
.then((res) => {
|
|||
|
|
let matterunit = res.data
|
|||
|
|
.filter((v) => v.nickname && v.name)
|
|||
|
|
.map((res) => ({
|
|||
|
|
id: res.name,
|
|||
|
|
label: res.nickname
|
|||
|
|
}));
|
|||
|
|
that.schoolnunitColums = [matterunit];
|
|||
|
|
})
|
|||
|
|
.catch((error) => {});
|
|||
|
|
},
|
|||
|
|
//学校列表
|
|||
|
|
addSchool() {
|
|||
|
|
this.schoolShowunit = true
|
|||
|
|
this.stationList()
|
|||
|
|
},
|
|||
|
|
schoolpickerConfrm(e) {
|
|||
|
|
this.policeStation.school = e.value[0].label
|
|||
|
|
this.schoolShowunit = false
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getsigneventList() {
|
|||
|
|
getsignevent({
|
|||
|
|
brigade: "长沙芙蓉区",
|
|||
|
|
borough: this.policeStation.station,
|
|||
|
|
station: this.policeStation.school,
|
|||
|
|
day: new Date().getDate(),
|
|||
|
|
end: timeFormat() + " 23:59:59",
|
|||
|
|
month: new Date().getMonth() + 1,
|
|||
|
|
start: timeFormat() + " 00:00:00",
|
|||
|
|
year: new Date().getFullYear(),
|
|||
|
|
}).then((res) => {
|
|||
|
|
res.data.forEach((item) => {
|
|||
|
|
if(item.imageUrls){
|
|||
|
|
const list = JSON.parse(item.imageUrls)
|
|||
|
|
if(list && list.length > 0){
|
|||
|
|
item.imageUrls = 'https://www.lonsungsh.com:8083' + list[0]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.clockInList = res.data
|
|||
|
|
this.clockInList = res.data.slice(0,this.index)
|
|||
|
|
console.log(this.clockInList);
|
|||
|
|
this.clockin = res.data.length
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
scrolltolower() {
|
|||
|
|
this.index += 5
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (this.clockInList.length < this.clockin) {
|
|||
|
|
this.statucolor = "loading"
|
|||
|
|
this.getsigneventList()
|
|||
|
|
} else {
|
|||
|
|
this.statucolor = "nomore"
|
|||
|
|
}
|
|||
|
|
}, 1000)
|
|||
|
|
},
|
|||
|
|
scrolltoupper(e) {
|
|||
|
|
},
|
|||
|
|
scroll(e) {},
|
|||
|
|
onCurrent(value) {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '加载中...'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.current = value
|
|||
|
|
this.scrollTop = 0
|
|||
|
|
this.index = 10
|
|||
|
|
uni.hideLoading()
|
|||
|
|
this.getsigneventList()
|
|||
|
|
this.getBoroughLists()
|
|||
|
|
this.policeStation.station = ''
|
|||
|
|
|
|||
|
|
}, 1000)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 放大图片
|
|||
|
|
imagebig(image){
|
|||
|
|
this.showUrl = true
|
|||
|
|
this.showUrlList = image
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.recordsList {
|
|||
|
|
margin-top: 0px;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
|
|||
|
|
.recordsListItem {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 2px;
|
|||
|
|
left: 4px;
|
|||
|
|
width: 98%;
|
|||
|
|
z-index: 99;
|
|||
|
|
}
|
|||
|
|
/deep/ .u-form-item__body{
|
|||
|
|
padding: 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-card-wrap {
|
|||
|
|
background-color: #ccc;
|
|||
|
|
padding: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-body-item {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333;
|
|||
|
|
padding: 20rpx 10rpx;
|
|||
|
|
margin: 14rpx;
|
|||
|
|
background-color: #f3f4f6;
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
.bodyItem{
|
|||
|
|
line-height: 22px;
|
|||
|
|
.bodyIndex {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #767676;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.bodyIndex span:nth-child(2){
|
|||
|
|
margin-right: 16rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.bodymark {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #767676;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.demo-scroll-block {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.warp {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
// width: 93%;
|
|||
|
|
height: 258rpx;
|
|||
|
|
transform: translate(15px, 86%); // height: 100%;
|
|||
|
|
.rect {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
// background-color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.availabel {
|
|||
|
|
height: 60vh;
|
|||
|
|
|
|||
|
|
// padding-top: 74px;
|
|||
|
|
image {
|
|||
|
|
height: 128%;
|
|||
|
|
transform: translateX(28px)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.disp {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
</style>
|