bjquanjiang
/
pinganxiaoyuan
1
0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

移动端 客流查询

master
yxq 3 месяцев назад
Родитель
a85461acd7
Сommit
f1da04f5f7
6 измененных файлов: 413 добавлений и 56 удалений
Разделённый вид
Опции Diff
Показать статистику Скачать Patch файл Скачать Diff файл
  1. +30
    -6
      monitorMobile/components/cell.vue
  2. +0
    -2
      monitorMobile/components/selectRadio.vue
  3. +58
    -32
      monitorMobile/components/selectSearch.vue
  4. +252
    -0
      monitorMobile/components/selectTree.vue
  5. +72
    -15
      monitorMobile/pages/attendanceCall/passengerFlow/add.vue
  6. +1
    -1
      monitorMobile/pages/attendanceCall/returnBed/index.vue

+ 30
- 6
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>

+ 0
- 2
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,


+ 58
- 32
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;
}

+ 252
- 0
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>

+ 72
- 15
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>

+ 1
- 1
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);">


Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить