移动端 客流查询

monitorMobile/components/cell.vue

@@ -1,27 +1,51 @@
 <template>
-	<u-cell :title="title" isLink :border="false" @click="click"></u-cell>
+	<u-cell :title="title" isLink :border="false" @click="click" :titleStyle="{fontSize:'28rpx'}">
+		<view v-if="multiple&&cellValue.length" slot="title" class="u-slot-title selectedBox">
+			<view v-for="(item,index) in cellValue" :key="index">
+				{{item}}
+			</view>
+		</view>
+	</u-cell>
 </template>
 
 <script>
 	export default {
-		name: "radio",
+		name: "myCell",
 		props: {
 			title: {
 				default: "",
-				type: String
 			},
+			multiple: {
+				default: false,
+			},
+			cellValue: {
+				default: () => [],
+			}
 		},
-		methods:{
-			click(){
+		methods: {
+			click() {
 				this.$emit("click")
 			}
 		}
 	}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 	.u-cell {
 		background: #fff;
 		border-radius: 20rpx;
 	}
+	.selectedBox{
+		display: flex;
+		flex-wrap: wrap;
+		>view{
+			display: inline-block;
+			background-color: #F2F8FF;
+			border-radius: 8rpx;
+			padding: 12rpx 18rpx;
+			margin: 6rpx;
+			font-size: 26rpx;
+			color: #000;
+		}
+	}
 </style>

monitorMobile/components/selectRadio.vue

@@ -19,7 +19,6 @@
 		props: {
 			value: {
 				default: "",
-				type: String | Number
 			},
 			options: {
 				default: [],
@@ -27,7 +26,6 @@
 			},
 			title:{
 				default: "",
-				type: String
 			},
 			cellVisible: {
 				default: true,

monitorMobile/components/selectSearch.vue

@@ -1,20 +1,23 @@
 <template>
 	<view>
-		<myCell v-show="cellVisible" :title="title_" isLink :border="false" @click="show = true"></myCell>
+		<myCell v-show="cellVisible" :multiple="multiple" :cellValue="cellValue" :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}}
+					{{popupTitle}}
 				</view>
 				<view v-if="filterable" style="padding: 0 30rpx 30rpx 30rpx">
-					<u-search v-model="searchText" :placeholder="'请输入'+(searchPlaceHolder||popupTitle)" shape="round"
+					<u-search v-model="searchText" :placeholder="searchPlaceholder" shape="round"
 						:showAction="false"></u-search>
 				</view>
-				<u-radio-group v-if="!multiple" :value="value_" iconPlacement="right" placement="column" @change="change" borderBottom>
+				<u-radio-group v-if="!multiple" :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>
-				<u-checkbox-group v-else :value="value_" iconPlacement="right" placement="column" @change="change" borderBottom>
+				<u-checkbox-group v-else v-model="value_" iconPlacement="right" placement="column" @change="change"
+					borderBottom>
 					<u-checkbox v-show="item.label.includes(searchText)" v-for="(item, index) in options" :key="index"
 						:label="item.label" :name="item.value">
 					</u-checkbox>
@@ -38,47 +41,60 @@
 		props: {
 			value: {
 				default: "",
-				type: String | Number
 			},
 			options: {
 				default: [],
 				type: Array
 			},
-			title: {
-				default: "",
-				type: String
+			// 是否显示cell回显
+			cellVisible: {
+				default: true,
+			},
+			// cell回显默认文字
+			placeholder:{
+				default:'请选择'
 			},
+			// 弹框标题
 			popupTitle: {
-				default: "",
+				default: "请选择",
 				type: String
 			},
-			searchPlaceHolder: {
-				default: "",
+			// 是否显示搜索
+			filterable: {
+				default: true,
+			},
+			// 搜索框默认文字
+			searchPlaceholder: {
+				default: "请输入",
 				type: String
 			},
-			cellVisible: {
-				default: true,
+			// 单选时候cell回显的文字
+			title: {
+				default: "",
 			},
+			// 是否多选
 			multiple: {
 				default: false,
 			},
-			filterable: {
-				default: true,
-			},
 		},
 		data() {
 			return {
 				show: false,
-				title_: this.title,
+				title_: this.title||this.placeholder,
 				value_: this.value,
-				radioValue: '',
-				searchText: ''
+				gruopValue: '',
+				searchText: '',
+				cellValue:[],
 			};
 		},
 		mounted() {
-			if (this.value) {
+			if (this.multiple) this.gruopValue = []
+			if (!this.multiple) {
 				let obj = this.options.find(e1 => e1.value == this.value)
 				if (obj) this.title_ = obj.label
+			} else {
+				let arr = this.options.filter(e1 => this.value.includes(e1.value))
+				this.cellValue = arr.map(e => e.label)
 			}
 		},
 		methods: {
@@ -86,20 +102,30 @@
 				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)
+				if (this.multiple) this.gruopValue = []
+				if (!this.multiple) {
+					let obj = this.options.find(e1 => e1.value == this.value)
+					if (obj) this.title_ = obj.label
+				} else {
+					let arr = this.options.filter(e1 => this.value.includes(e1.value))
+					this.cellValue = arr.map(e => e.label)
+				}
 				this.value_ = this.value
 				this.searchText = ''
 			},
 			change(e) {
-				this.radioValue = e
+				this.gruopValue = 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.$emit("update:value", this.gruopValue)
+				this.$emit("change", this.gruopValue)
+				if (!this.multiple) {
+					let obj = this.options.find(e1 => e1.value == this.gruopValue)
+					if (obj) this.title_ = obj.label
+				} else {
+					let arr = this.options.filter(e1 => this.gruopValue.includes(e1.value))
+					this.cellValue = arr.map(e => e.label)
+				}
 				this.close()
 			},
 		}
@@ -126,13 +152,13 @@
 			padding: 24rpx 0;
 		}
 	}
-	
+
 	.u-checkbox-group {
 		width: 92%;
 		max-height: 680rpx;
 		overflow-y: auto;
 		padding: 0 30rpx;
-	
+
 		.u-cell {
 			background-color: #fff;
 			border-radius: 20rpx 20rpx 0 0;
@@ -147,7 +173,7 @@
 	.u-radio {
 		margin-top: 18rpx;
 	}
-	
+
 	.u-checkbox {
 		margin-top: 18rpx;
 	}

monitorMobile/components/selectTree.vue

@@ -0,0 +1,252 @@
+<template>
+	<view>
+		<myCell v-show="cellVisible" :title="title" isLink :border="false" @click="show = true"></myCell>
+		<u-popup :show="show" mode="bottom" :closeable="true" :round="10" @close="close" @open="open">
+			<view class="title">
+				{{popupTitle}}
+			</view>
+			<view>
+				<u-tabs :list="tabsList" :current="tabIndex" @change="tabsChange" :activeStyle="{
+				    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 v-for="(item) in tabsList" :key="item.value">
+					<template v-if="tabIndex == item.value">
+						<u-radio-group v-model="selectValue" iconPlacement="right" placement="column" @change="change"
+							borderBottom>
+							<u-radio v-for="(item,index) in selectOptions" :key="index" :label="item.label"
+								:name="item.value"></u-radio>
+						</u-radio-group>
+					</template>
+				</view>
+				<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: Array
+			},
+			labels: {
+				default: () => [],
+				type: Array
+			},
+			placeholder: {
+				default: '请选择'
+			},
+			popupTitle: {
+				default: "请选择",
+				type: String
+			},
+			cellVisible: {
+				default: true,
+			},
+		},
+		data() {
+			return {
+				show: false,
+				title: this.labels.join('/') || this.placeholder,
+				tabsList: [{
+						name: "系部",
+						cate:"系部",
+						value: 0,
+						disabled: false,
+						list: [{
+							value: 222,
+							label: '信息系'
+						}, {
+							value: 333,
+							label: '金融系'
+						}]
+					},
+					{
+						name: "专业",
+						cate:"专业",
+						value: 1,
+						disabled: true,
+						list: [{
+							value: 222,
+							label: '计算机应用'
+						}, {
+							value: 333,
+							label: '土木工程'
+						}]
+					},
+					{
+						name: "班级",
+						cate:"班级",
+						value: 2,
+						disabled: true,
+						list: [{
+							value: 222,
+							label: '1班'
+						}, {
+							value: 333,
+							label: '2班'
+						}]
+					},
+				],
+				tabIndex: 0,
+				selectValue: null,
+				selectOptions: [],
+
+				selectValues: this.value,
+				selectLabels: [],
+			};
+		},
+		mounted() {
+			// 获取第一个tab的selectOptions
+		},
+		methods: {
+			close() {
+				this.show = false
+			},
+			// 打开选择弹框
+			open() {
+				this.selectValues = this.value || []
+				this.title = this.labels.join('/') || this.placeholder
+				if(!this.selectValues.length){
+					// 展示tabs第一个数据
+					this.tabIndex = 0
+				}else{
+					// 展示tabs最后一个数据
+					this.tabIndex = 2
+				}
+				this.setSelectOptions()
+				this.show = true
+			},
+			// 设置单选列表数据
+			setSelectOptions(){
+				switch(this.tabIndex){
+					case 0:
+						this.selectOptions = this.tabsList[0].list
+						break
+					case 1:
+						this.selectOptions = this.tabsList[1].list
+						break
+					case 2:
+						this.selectOptions = this.tabsList[2].list
+						break
+				}
+			},
+			// 单选改变
+			change(e) {
+				// 赋值
+				this.selectValues[this.tabIndex] = e
+				let obj = this.selectOptions.find(e1 => e1.value == e)
+				this.selectLabels[this.tabIndex] = obj.label
+				// 切换tab
+				if (this.tabIndex < this.tabsList.length - 1) {
+					let nextItem = this.tabsList[this.tabIndex + 1]
+					this.tabsChange(nextItem)
+				}
+				if(this.tabIndex == this.tabsList.length - 1){
+					this.tabsList[this.tabIndex].name = obj.label
+				}
+			},
+			// 切换tab
+			tabsChange(item) {
+				console.log(1)
+				if (this.tabIndex == item.value) return
+				this.tabIndex = item.value
+				setTimeout(() => {
+					this.setSelectOptions()
+					this.selectValue = null
+					this.initTabs()
+				}, 150)
+			},
+			// 初始化tab数据
+			initTabs() {
+				for (let item of this.tabsList) {
+					if (item.value > this.tabIndex) {
+						item.disabled = true
+						this.selectValues[item.value] = ''
+						this.selectLabels[item.value] = ''
+					} else if (item.value < this.tabIndex) {
+						item.disabled = false
+					} else {
+						item.disabled = false
+						this.selectValues[item.value] = ''
+						this.selectLabels[item.value] = ''
+					}
+					item.name = this.selectLabels[item.value]||item.cate
+				}
+			},
+			// 确定
+			cofirm() {
+				if (this.selectValues[2]) {
+					this.$emit("input", this.selectValues)
+					this.$emit("update:labels", this.selectLabels)
+					this.$emit("change", this.selectValues)
+					this.title = this.selectLabels.join('/')
+					this.close()
+				}else{
+					this.$emit("input", [])
+					this.$emit("update:labels", [])
+					this.$emit("change", [])
+					this.title = this.placeholder
+					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-checkbox-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;
+	}
+
+	.u-checkbox {
+		margin-top: 18rpx;
+	}
+</style>

monitorMobile/pages/attendanceCall/passengerFlow/add.vue

@@ -1,31 +1,88 @@
 <template>
-	<view>
-		<u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">
-			<u-form-item label="姓名" prop="name" borderBottom>
-				<u--input v-model="form.name" border="none"></u--input>
-			</u-form-item>
-		</u--form>
+	<view style="padding-top: 30rpx;">
+		<view class="whiteCard">
+			<u--form labelPosition="top" :labelStyle="{fontSize:'32rpx',color:'#666'}" labelWidth="200" :model="form" :rules="rules" ref="uForm">
+				<u-form-item label="摄像头(多选)" prop="name" borderBottom>
+					<view
+						style="width: 160%;margin-left: -30rpx;margin-right: -30rpx;margin-bottom: -20rpx;margin-top: -10rpx;">
+						<selectSearch :value.sync="form.shexiangtou"
+							:options="[{value:1,label:'走廊尽头(海康)'},{value:2,label:'厨房(海康)'},{value:3,label:'走廊尽头(海康)'},{value:4,label:'厨房(海康)'}]"
+							placeholder="请选择摄像头" :filterable="false" multiple />
+					</view>
+				</u-form-item>
+				<u-form-item label="查询时间段" prop="timeslot" borderBottom>
+					<uni-datetime-picker v-model="form.tick" type="datetimerange">
+						<view class="demo-layout">
+							<view>
+								{{form.tick.length?form.tick.join('-'):'请选择'}}
+							</view>
+							<image style="width: 30rpx;height:30rpx;"
+								src="@/static/image/earlyWarning/calendar.png" mode=""></image>
+						</view>
+					</uni-datetime-picker>
+				</u-form-item>
+				<u-form-item label="系部/专业/班级" prop="timeslot" borderBottom>
+					<view
+						style="width: 160%;margin-left: -30rpx;margin-right: -30rpx;margin-bottom: -20rpx;margin-top: -10rpx;">
+						
+						<selectTree v-model="form.departCalss" :labels.sync="form.departCalssName"/>
+					</view>
+				</u-form-item>
+				<u-form-item labelPosition="left" label="分片类型（天/小时）" prop="timeslot" borderBottom>
+					<u-radio-group v-model="form.type">
+						<u-radio v-for="(item,index) in [{value:'1',label:'天'},{value:'2',label:'小时'}]" :key="index" :label="item.label"
+							:name="item.value"></u-radio>
+					</u-radio-group>
+				</u-form-item>
+			</u--form>
+		</view>
 	</view>
 </template>
 
 <script>
+	import selectSearch from "@/components/selectSearch.vue"
+	import selectTree from "@/components/selectTree.vue"
 	export default {
+		components: {
+			selectSearch,
+			selectTree
+		},
 		data() {
 			return {
-				form: {},
+				form: {
+					shexiangtou: [],
+					tick: [],
+				},
 				rules: []
 			}
-		}
+		},
+		methods: {}
 	}
 </script>
 
 <style scoped lang="scss">
-	.u-form {
-		background-color: #fff;
-		// border-radius: 18rpx;
-		// margin: 30rpx 28rpx;
-		// padding: 30rpx;
-		// color: #333333;
-		margin-top: 100rpx;
+	.whiteCard {
+		padding: 30rpx 30rpx;
+		margin: 15rpx 30rpx;
+		border-radius: 18rpx;
+		background-color: #ffffff;
+		font-size: 32rpx;
+	}
+	
+	.demo-layout{
+		display: flex;
+		padding: 15rpx 0;
+		justify-content: space-between;
+		align-items: center;
+		&:first-child{
+			flex: 1;
+			padding-right:30rpx;
+		}
+	}
+	
+	.u-radio-group{
+		&>*:first-child{
+			margin-right: 36rpx;
+		}
 	}
 </style>

monitorMobile/pages/attendanceCall/returnBed/index.vue

@@ -4,7 +4,7 @@
 			<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="寝室号"/>
+				placeholder="请选择寝室" popupTitle="请选择寝室" search-placeholder="请输入寝室号"/>
 		</view>
 		<u-empty marginTop="100rpx" :show="false" mode="list" text="暂无数据"></u-empty>
 		<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 220rpx);">