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> |