瀏覽代碼

移动端 寝室归寝

master
yxq 3 週之前
父節點
當前提交
60567702a5
共有 13 個檔案被更改,包括 939 行新增38 行删除
  1. +27
    -0
      monitorMobile/components/cell.vue
  2. +86
    -0
      monitorMobile/components/selectRadio.vue
  3. +123
    -0
      monitorMobile/components/selectSearch.vue
  4. +20
    -2
      monitorMobile/pages.json
  5. +6
    -1
      monitorMobile/pages/attendanceCall/index.vue
  6. +159
    -0
      monitorMobile/pages/attendanceCall/passengerFlow/detail.vue
  7. +127
    -6
      monitorMobile/pages/attendanceCall/passengerFlow/index.vue
  8. +137
    -0
      monitorMobile/pages/attendanceCall/returnBed/comfirm.vue
  9. +159
    -0
      monitorMobile/pages/attendanceCall/returnBed/detail.vue
  10. +95
    -29
      monitorMobile/pages/attendanceCall/returnBed/index.vue
  11. 二進制
      monitorMobile/static/image/home1.png
  12. 二進制
      monitorMobile/static/image/see.png
  13. 二進制
      monitorMobile/static/image/test/test.png

+ 27
- 0
monitorMobile/components/cell.vue 查看文件

@@ -0,0 +1,27 @@
<template>
<u-cell :title="title" isLink :border="false" @click="click"></u-cell>
</template>

<script>
export default {
name: "radio",
props: {
title: {
default: "",
type: String
},
},
methods:{
click(){
this.$emit("click")
}
}
}
</script>

<style scoped>
.u-cell {
background: #fff;
border-radius: 20rpx;
}
</style>

+ 86
- 0
monitorMobile/components/selectRadio.vue 查看文件

@@ -0,0 +1,86 @@
<template>
<view>
<myCell :title="title_" isLink :border="false" @click="show = true"></myCell>
<u-popup :show="show" mode="center" :round="10" @close="close" @open="open">
<u-radio-group v-model="value_" iconPlacement="right" placement="column" @change="change" borderBottom>
<u-radio v-for="(item,index) in options" :key="index" :label="item.label" :name="item.value"></u-radio>
</u-radio-group>
</u-popup>
</view>
</template>

<script>
import myCell from "@/components/cell.vue"
export default {
name: "selectRadio",
components:{
myCell
},
props: {
value: {
default: "",
type: String | Number
},
options: {
default: [],
type: Array
},
title:{
default: "",
type: String
},
},
data() {
return {
show: false,
title_:this.title,
value_:this.value,
};
},
mounted() {
if(this.value){
let obj = this.options.find(e1=>e1.value == this.value)
if(obj) this.title_ = obj.label
}
},
methods: {
close() {
this.show = false
},
open(){
let obj = this.options.find(e1 => e1.value == this.value)
if (obj) this.title_ = obj.label
this.title_ = obj ? obj.label : this.title
this.value_ = this.value
},
change(e) {
this.$emit("update:value",e)
let obj = this.options.find(e1=>e1.value == e)
if(obj) this.title_ = obj.label
this.$emit("change")
},
}
}
</script>

<style scoped lang="scss">
.u-radio-group {
width: 550rpx;
max-height: 680rpx;
overflow-y: auto;
padding: 0 24rpx;
.u-cell {
background-color: #fff;
border-radius: 20rpx;
padding: 24rpx 0;
}
}

.u-border-bottom {
border-color: #F6F6F6 !important;
}

.u-radio {
margin-top: 18rpx;
}
</style>

+ 123
- 0
monitorMobile/components/selectSearch.vue 查看文件

@@ -0,0 +1,123 @@
<template>
<view>
<myCell :title="title_" isLink :border="false" @click="show = true"></myCell>
<u-popup :show="show" mode="bottom" :closeable="true" :round="10" @close="close" @open="open">
<view>
<view class="title">
{{'请选择' + popupTitle}}
</view>
<view style="padding: 0 30rpx 30rpx 30rpx">
<u-search v-model="searchText" :placeholder="'请输入'+(searchPlaceHolder||popupTitle)" shape="round"
:showAction="false"></u-search>
</view>
<u-radio-group :value="value_" iconPlacement="right" placement="column" @change="change" borderBottom>
<u-radio v-show="item.label.includes(searchText)" v-for="(item,index) in options" :key="index" :label="item.label"
:name="item.value"></u-radio>
</u-radio-group>
<view style="padding: 36rpx 50rpx">
<u-button @click="cofirm" type="primary" style="border-radius: 36rpx;height: 72rpx;"
text="确定"></u-button>
</view>
</view>
</u-popup>
</view>
</template>

<script>
import myCell from "@/components/cell.vue"
export default {
name: "selectRadio",
components: {
myCell
},
props: {
value: {
default: "",
type: String | Number
},
options: {
default: [],
type: Array
},
title: {
default: "",
type: String
},
popupTitle: {
default: "",
type: String
},
searchPlaceHolder: {
default: "",
type: String
},
},
data() {
return {
show: false,
title_: this.title,
value_: this.value,
radioValue: '',
searchText: ''
};
},
mounted() {
if (this.value) {
let obj = this.options.find(e1 => e1.value == this.value)
if (obj) this.title_ = obj.label
}
},
methods: {
close() {
this.show = false
},
open() {
let obj = this.options.find(e1 => e1.value == this.value)
if (obj) this.title_ = obj.label
this.title_ = obj ? obj.label : (this.popupTitle || this.title)
this.value_ = this.value
this.searchText = ''
},
change(e) {
this.radioValue = e
},
cofirm() {
this.$emit("update:value", this.radioValue)
this.$emit("change", this.radioValue)
let obj = this.options.find(e1 => e1.value == this.radioValue)
if (obj) this.title_ = obj.label
this.close()
},
}
}
</script>

<style scoped lang="scss">
.title {
color: #000000;
font-size: 32rpx;
text-align: center;
line-height: 100rpx;
}

.u-radio-group {
width: 92%;
max-height: 680rpx;
overflow-y: auto;
padding: 0 30rpx;

.u-cell {
background-color: #fff;
border-radius: 20rpx 20rpx 0 0;
padding: 24rpx 0;
}
}

.u-border-bottom {
border-color: #F6F6F6 !important;
}

.u-radio {
margin-top: 18rpx;
}
</style>

+ 20
- 2
monitorMobile/pages.json 查看文件

@@ -47,9 +47,27 @@
{
"path": "pages/attendanceCall/index",
"style": {
"navigationBarTitleText": "考勤点名"
"navigationBarTitleText": "考勤点名",
"enablePullDownRefresh": true
}
},
// 归寝
{
"path" : "pages/attendanceCall/returnBed/detail",
"style" :
{
"navigationBarTitleText": "查看详情",
"enablePullDownRefresh": false
}
},
{
"path" : "pages/attendanceCall/returnBed/comfirm",
"style" :
{
"navigationBarTitleText": "归寝确认",
"enablePullDownRefresh": false
}
},
// {
// "path": "pages/attendanceCall/rollCall/index",
// "style": {
@@ -82,7 +100,7 @@
"navigationBarTitleText": "我的"
}
}
],
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "校园监控预警平台",


+ 6
- 1
monitorMobile/pages/attendanceCall/index.vue 查看文件

@@ -4,7 +4,7 @@
color: '#000000',
}" itemStyle="height:84rpx;width:33.33%;box-sizing:border-box;background:#fff;border-top:1rpx solid rgba(0,0,0,0.03)"></u-tabs>
<view style="height: calc(100% - 84rpx);">
<component :is="componentName"/>
<component :is="componentName" ref="pageComponent"/>
</view>
</view>
</template>
@@ -39,6 +39,11 @@
tabsClick(item) {
this.componentName = item.value
}
},
onPullDownRefresh(){
this.$refs['pageComponent'].pullDownRefresh()
uni.stopPullDownRefresh()
}
}
</script>


+ 159
- 0
monitorMobile/pages/attendanceCall/passengerFlow/detail.vue 查看文件

@@ -0,0 +1,159 @@
<template>
<view>
<view class="title">
<image src="@/static/image/home1.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 8rpx;">
</image>
寝室104
</view>
<view class="listTitlte">
已归寝
</view>
<view class="list">
<view v-for="(item, index) in list" :key="index" class="item">
<view class="right">
<image src="@/static/image/test/test.png" mode="" style="width: 160rpx;height: 160rpx;"></image>
<view class="des">
<view class="top">
<view class="status">
已归寝
</view>
<view class="name">
杨云
</view>
</view>
<view class="depart">
系部:安环部
</view>
<view class="bottom">
<view class="major">专业:环艺</view>
<view class="class">班级:第二班</view>
</view>
</view>
</view>
</view>
</view>
<view class="listTitlte">
未归寝
</view>
<view class="list">
<view v-for="(item, index) in list" :key="index" class="item">
<view class="right">
<image src="@/static/image/test/test.png" mode="" style="width: 160rpx;height: 160rpx;"></image>
<view class="des">
<view class="top">
<view class="status error">
未归寝
</view>
<view class="name">
杨云
</view>
</view>
<view class="depart">
系部:安环部
</view>
<view class="bottom">
<view class="major">专业:环艺</view>
<view class="class">班级:第二班</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
list: [{
name: 1
}, {
name: 2
}, {
name: 3
}],
checkboxValue:[],
}
},
methods: {
}
}
</script>

<style scoped lang="scss">
.title {
display: flex;
color: #333333;
padding: 26rpx;
background: #fff;
border-top: 1rpx solid rgba(0, 0, 0, 0.03);
font-size: 30rpx;
}
.listTitlte{
color: #777777;
font-size:28rpx;
padding:18rpx 30rpx;
}
.list {
padding: 0 26rpx;
margin-bottom: 16rpx;
.item {
display: flex;
margin-bottom: 28rpx;

&:last-child {
margin-bottom: 0;
}

.right {
padding: 30rpx;
flex: 1;
background-color: #fff;
border-radius: 18rpx;
display: flex;

.des {
flex: 1;
padding-left: 24rpx;
font-size: 26rpx;
color: #333;

.top {
color: #333;
font-size: 32rpx;
display:flex;
.status{
display: inline-block;
font-size: 26rpx;
line-height: 1.5;
background-color: #0FAF76;
color: #fff;
padding: 0 12rpx;
border-radius: 8rpx;
margin-right: 12rpx;
}
.status.error{
background-color: #EF2D2D;
}
}

.depart {
margin-top: 28rpx;
}

.bottom {
margin-top: 18rpx;
display: flex;
justify-content: space-between;

.major {}

.class {}
}
}
}
}
}
</style>

+ 127
- 6
monitorMobile/pages/attendanceCall/passengerFlow/index.vue 查看文件

@@ -1,6 +1,36 @@
<template>
<view>
客流
<view style="height: 100%;">
<u-empty marginTop="100rpx" :show="false" mode="list" text="暂无数据"></u-empty>
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);">
<u-list-item v-for="(item, index) in list" :key="index">
<view class="whiteCard">
<view class="row1">
摄像头:教室(海康)、大厅(魔豆)
</view>
<view class="row2">
查询时间:2024-08-14 08:34:59
</view>
<view class="row3">
<view class="">
<text>开始时间:</text>2024-08-14 08:34:59
</view>
<view class="">
<text>结束时间:</text>2024-08-14 08:34:59
</view>
<view class="">
<text>分片类型:</text>小时
</view>
</view>
<view class="bottom">
<view class="btn" @click="NAV_TO('./returnBed/detail')">
<image src="@/static/image/see.png" mode=""></image>
<text>分片详情</text>
</view>
</view>
</view>
</u-list-item>
<u-loadmore :status="status" />
</u-list>
</view>
</template>

@@ -8,15 +38,106 @@
export default {
data() {
return {
list: [{}, {}, {}, {}, {}, {}, {}, {}, {}, ],
isLoading: false,
status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了
search: {
loudong: 1,
qinshi: ''
},
page: {
size: 8,
page: 8,
}
}
},
methods: {
scrolltolower() {
this.loadmore()
},
loadmore() {
if (this.status != 'loadmore') return
this.status = 'loading'
setTimeout(() => {
for (let i = 0; i < 1; i++) {
this.list.push({}, {}, {}, {})
}
// 获取到的总条数>=接口总条数 || 接口总条数为0
if (this.list.length >= 14) {
this.status = 'nomore'
} else {
this.status = 'loadmore'
}
}, 2000)
},
refresh() {
this.status = 'loadmore'
this.list = []
this.page.page = 1
this.loadmore()
},
pullDownRefresh() {
this.refresh()
}
},
onLoad() {
this.loadmore()
},
}
</script>

<style>
<style lang="scss" scoped>
.whiteCard {
background-color: #fff;
border-radius: 18rpx;
margin: 12rpx 28rpx;
padding: 30rpx;
color: #333333;

.row1 {
font-size: 30rpx;
}

.row2 {
font-size: 26rpx;
margin-top: 12rpx;
}
.row3{
background-color: #F2F8FF;
border-radius: 16rpx;
font-size: 26rpx;
padding: 18rpx 24rpx;
line-height: 48rpx;
margin-top: 14rpx;
text{
color: #777777;
}
}

.bottom {
display: flex;
border-top: 1rpx solid rgba(0, 0, 0, 0.1);
margin-top: 24rpx;
padding-top: 22rpx;
position: relative;

.btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;

uni-image {
width: 34rpx;
height: 34rpx;
margin-right: 6rpx;
}

</style>
uni-text {
font-size: 30rpx;
}
}
}
}
</style>

+ 137
- 0
monitorMobile/pages/attendanceCall/returnBed/comfirm.vue 查看文件

@@ -0,0 +1,137 @@
<template>
<view>
<view class="title">
<image src="@/static/image/home1.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 8rpx;"></image>
寝室104
</view>
<view class="time">
2024年8月24日 18:00:00 ~ 18:59:00
</view>
<u-checkbox-group v-model="checkboxValue" class="list" placement="column">
<view v-for="(item, index) in list" :key="index" class="item">
<u-checkbox :name="item.name" shape="circle" label=""></u-checkbox>
<view class="right">
<image src="@/static/image/test/test.png" mode="" style="width: 160rpx;height: 160rpx;"></image>
<view class="des">
<view class="name">
杨云
</view>
<view class="depart">
系部:安环部
</view>
<view class="bottom">
<view class="major">专业:环艺</view>
<view class="class">班级:第二班</view>
</view>
</view>
</view>
</view>
</u-checkbox-group>
<view class="returnConfirm">
<u-checkbox-group><u-checkbox shape="circle" label="全选" name="" @change="radioChange"></u-checkbox></u-checkbox-group>
<u-button @click="returnConfirm" type="primary" style="border-radius: 36rpx;height: 72rpx;margin-left:16rpx"
text="确定归寝(0)"></u-button>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
list: [{
name: 1
}, {
name: 2
}, {
name: 3
}],
checkboxValue:[],
}
},
methods: {
radioChange(e){
if(e){
let ids = this.list.map(e=>e.name)
this.checkboxValue = ids
}else{
this.checkboxValue = []
}
},
returnConfirm() {
console.log(this.checkboxValue)
}
}
}
</script>

<style scoped lang="scss">
.title {
display: flex;
color: #333333;
padding: 26rpx;
background: #fff;
border-top: 1rpx solid rgba(0, 0, 0, 0.03);
font-size: 30rpx;
}

.time {
color: #333333;
font-size: 28rpx;
padding: 26rpx;
}

.list {
padding: 0 26rpx;

.item {
display: flex;
margin-bottom: 28rpx;

&:last-child {
margin-bottom: 0;
}

.right {
margin-left: 12rpx;
padding: 30rpx;
flex: 1;
background-color: #fff;
border-radius: 18rpx;
display: flex;

.des {
flex: 1;
padding-left: 24rpx;
font-size: 26rpx;
color: #333;

.name {
color: #333;
font-size: 32rpx
}

.depart {
margin-top: 28rpx;
}

.bottom {
margin-top: 18rpx;
display: flex;
justify-content: space-between;

.major {}

.class {}
}
}
}
}
}

.returnConfirm {
padding: 30rpx;
display: flex;
}
</style>

+ 159
- 0
monitorMobile/pages/attendanceCall/returnBed/detail.vue 查看文件

@@ -0,0 +1,159 @@
<template>
<view>
<view class="title">
<image src="@/static/image/home1.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 8rpx;">
</image>
寝室104
</view>
<view class="listTitlte">
已归寝
</view>
<view class="list">
<view v-for="(item, index) in list" :key="index" class="item">
<view class="right">
<image src="@/static/image/test/test.png" mode="" style="width: 160rpx;height: 160rpx;"></image>
<view class="des">
<view class="top">
<view class="status">
已归寝
</view>
<view class="name">
杨云
</view>
</view>
<view class="depart">
系部:安环部
</view>
<view class="bottom">
<view class="major">专业:环艺</view>
<view class="class">班级:第二班</view>
</view>
</view>
</view>
</view>
</view>
<view class="listTitlte">
未归寝
</view>
<view class="list">
<view v-for="(item, index) in list" :key="index" class="item">
<view class="right">
<image src="@/static/image/test/test.png" mode="" style="width: 160rpx;height: 160rpx;"></image>
<view class="des">
<view class="top">
<view class="status error">
未归寝
</view>
<view class="name">
杨云
</view>
</view>
<view class="depart">
系部:安环部
</view>
<view class="bottom">
<view class="major">专业:环艺</view>
<view class="class">班级:第二班</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
list: [{
name: 1
}, {
name: 2
}, {
name: 3
}],
checkboxValue:[],
}
},
methods: {
}
}
</script>

<style scoped lang="scss">
.title {
display: flex;
color: #333333;
padding: 26rpx;
background: #fff;
border-top: 1rpx solid rgba(0, 0, 0, 0.03);
font-size: 30rpx;
}
.listTitlte{
color: #777777;
font-size:28rpx;
padding:18rpx 30rpx;
}
.list {
padding: 0 26rpx;
margin-bottom: 16rpx;
.item {
display: flex;
margin-bottom: 28rpx;

&:last-child {
margin-bottom: 0;
}

.right {
padding: 30rpx;
flex: 1;
background-color: #fff;
border-radius: 18rpx;
display: flex;

.des {
flex: 1;
padding-left: 24rpx;
font-size: 26rpx;
color: #333;

.top {
color: #333;
font-size: 32rpx;
display:flex;
.status{
display: inline-block;
font-size: 26rpx;
line-height: 1.5;
background-color: #0FAF76;
color: #fff;
padding: 0 12rpx;
border-radius: 8rpx;
margin-right: 12rpx;
}
.status.error{
background-color: #EF2D2D;
}
}

.depart {
margin-top: 28rpx;
}

.bottom {
margin-top: 18rpx;
display: flex;
justify-content: space-between;

.major {}

.class {}
}
}
}
}
}
</style>

+ 95
- 29
monitorMobile/pages/attendanceCall/returnBed/index.vue 查看文件

@@ -1,7 +1,13 @@
<template>
<view style="height: 100%;">
<view class="searchBox">
<selectRadio :value.sync="search.loudong" :options="[{value:1,label:'loudong1'},{value:2,label:'loudong2'}]"
title="楼栋" />
<selectSearch :value.sync="search.qinshi" :options="[{value:1,label:'qinshi1'},{value:2,label:'qinshi2'}]"
title="寝室" search-place-holder="寝室号"/>
</view>
<u-empty marginTop="100rpx" :show="false" mode="list" text="暂无数据"></u-empty>
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);">
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 220rpx);">
<u-list-item v-for="(item, index) in list" :key="index">
<view class="whiteCard">
<view class="row1">
@@ -16,7 +22,11 @@
<text class="noReturnNum">未归寝人数:2</text>
</view>
<view class="bottom">
<view class="returnConfirm">
<view class="btn" @click="NAV_TO('./returnBed/detail')">
<image src="@/static/image/see.png" mode=""></image>
<text>查看</text>
</view>
<view class="btn" @click="NAV_TO('./returnBed/comfirm')">
<image src="@/static/image/confirm.png" mode=""></image>
<text>归寝确认</text>
</view>
@@ -29,12 +39,26 @@
</template>

<script>
import selectRadio from "@/components/selectRadio.vue"
import selectSearch from "@/components/selectSearch.vue"
export default {
components: {
selectRadio,
selectSearch
},
data() {
return {
list: [{},{},{},{},{},{},{},{},{},],
isLoading:false,
status:'loadmore',//loading正在加载 loadmore加载更多 nomore没有更多了
list: [{}, {}, {}, {}, {}, {}, {}, {}, {}, ],
isLoading: false,
status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了
search: {
loudong: 1,
qinshi: ''
},
page:{
size:8,
page:8,
}
}
},
methods: {
@@ -42,19 +66,28 @@
this.loadmore()
},
loadmore() {
if(this.status != 'loadmore')return
if (this.status != 'loadmore') return
this.status = 'loading'
setTimeout(()=>{
setTimeout(() => {
for (let i = 0; i < 1; i++) {
this.list.push({},{})
this.list.push({}, {},{},{})
}
// 获取到的总条数>=接口总条数
if(this.list.length>=14){
// 获取到的总条数>=接口总条数 || 接口总条数为0
if (this.list.length >= 14) {
this.status = 'nomore'
}else{
} else {
this.status = 'loadmore'
}
},2000)
}, 2000)
},
refresh(){
this.status = 'loadmore'
this.list = []
this.page.page = 1
this.loadmore()
},
pullDownRefresh(){
this.refresh()
}
},
onLoad() {
@@ -64,58 +97,91 @@
</script>

<style lang="scss" scoped>
.whiteCard{
.searchBox {
margin: 24rpx 28rpx 12rpx;

>view {
margin-bottom: 18rpx;

&:last-child {
margin-bottom: 0rpx;
}
}
}

.whiteCard {
background-color: #fff;
border-radius: 18rpx;
margin: 12rpx 28rpx;
padding: 30rpx;
color: #333333;
.row1{

.row1 {
display: flex;
justify-content: space-between;
.room{

.room {
font-size: 34rpx;
}
.peopleNum{
uni-image{

.peopleNum {
uni-image {
width: 34rpx;
height: 34rpx;
position: relative;
top: 6rpx;
margin-right: 6rpx;
}
uni-text{

uni-text {
color: #2388FF;
font-size: 30rpx;
}
}
}
.row2{

.row2 {
margin-top: 18rpx;
display: flex;
justify-content: space-between;
font-size: 30rpx;
.returnNum{
}
.noReturnNum{
}
.returnNum {}
.noReturnNum {}
}
.bottom{

.bottom {
display: flex;
justify-content: center;
align-items: center;
border-top: 1rpx solid rgba(0, 0, 0, 0.1);
margin-top: 24rpx;
padding-top: 22rpx;
.returnConfirm{
uni-image{
position: relative;
::after{
content: "";
display: block;
position: absolute;
top: 30rpx;bottom: 0;
left: 0;right: 0;
margin: 0 auto;
width: 1rpx;
height: 32rpx;
background-color: rgba(0, 0, 0, 0.01);
}
.btn {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
uni-image {
width: 34rpx;
height: 34rpx;
position: relative;
top: 6rpx;
margin-right: 6rpx;
}
uni-text{

uni-text {
font-size: 30rpx;
}
}


二進制
monitorMobile/static/image/home1.png 查看文件

Before After
Width: 80  |  Height: 80  |  Size: 1.0 KiB

二進制
monitorMobile/static/image/see.png 查看文件

Before After
Width: 68  |  Height: 68  |  Size: 1.3 KiB

二進制
monitorMobile/static/image/test/test.png 查看文件

Before After
Width: 320  |  Height: 320  |  Size: 271 KiB

Loading…
取消
儲存