<template>
|
<view class="select-group">
|
<view class="condition">
|
<view class="region-text" @click="regionPopup">
|
<view class="area-box">
|
<view class="text">
|
<regionSelect :isTown="true" :defaultValue="defaultRegion" @regionChange="regionChange">
|
</regionSelect>
|
</view>
|
<view class="icon">
|
<image class="img-icon" :src="imageList.iconDownBlack"></image>
|
</view>
|
</view>
|
<u--input v-model="searchKey" placeholder="搜索水库" border="none" prefixIcon="search"
|
prefixIconStyle="font-size: 22px;color: #909399" @confirm="sendSearchKey">
|
</u--input>
|
|
<view class="basin-box" style="margin-right: 20rpx;">
|
<view class="text">
|
<BasinSelect :code="basCode" @basinChange="basinChange"></BasinSelect>
|
</view>
|
<view class="icon">
|
<u-icon name="arrow-down-fill" size="12"></u-icon>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
import regionSelect from "@/components/my-components/regionSelect.vue"
|
import BasinSelect from '@/components/my-components/basinSelect.vue'
|
export default {
|
props: ['flag', "videoType", 'status', 'camera', 'keyWord', 'defaultValue'],
|
components: {
|
regionSelect,
|
BasinSelect
|
},
|
data() {
|
return {
|
imageList: {
|
iconDownBlack: "https://sk.hubeishuiyi.cn/business/xcxImg/realtimeMonitiorImg/downBlack.png",
|
search: "https://sk.hubeishuiyi.cn/business/xcxImg/realtimeMonitiorImg/search.png",
|
more: "https://sk.hubeishuiyi.cn/business/xcxImg/realtimeMonitiorImg/more.png"
|
},
|
tabList: [{
|
name: "全部"
|
},
|
// {
|
// name: "收藏"
|
// }
|
],
|
inactiveStyle: {
|
fontSize: "32rpx",
|
},
|
activeStyle: {
|
fontSize: "32rpx",
|
color: "#4593F2"
|
},
|
searchKey: "",
|
popUpVisible: false,
|
filterList: [],
|
defaultRegion: {},
|
basCode: ""
|
}
|
},
|
watch: {
|
|
},
|
created() {
|
this.init()
|
},
|
mounted() {
|
|
},
|
onLoad(option) {
|
|
},
|
onShow() {
|
|
},
|
methods: {
|
init() {
|
this.defaultRegion = this.defaultValue
|
if (this.keyWord) {
|
this.searchKey = this.keyWord
|
}
|
|
if (this.videoType) {
|
let arr = this.videoTypeList.filter(e => {
|
return e.value == this.videoType
|
})
|
this.query.videoType = arr[0].value
|
this.query.videoTypeLabel = arr[0].name
|
}
|
|
if (this.status) {
|
let arr = this.statusList.filter(e => {
|
return e.value == this.status
|
})
|
this.query.status = arr[0].value
|
this.query.statusLabel = arr[0].name
|
}
|
|
if (this.camera) {
|
let arr = this.cameraList.filter(e => {
|
return e.value == this.camera
|
})
|
this.query.camera = arr[0].value
|
this.query.cameraLabel = arr[0].name
|
}
|
},
|
tabClick() {
|
|
},
|
cancelSearch() {
|
|
},
|
/**
|
* 区域弹出层
|
*/
|
regionPopup() {
|
this.popUpVisible = !this.popUpVisible
|
},
|
closePopup(data) {
|
this.region = data
|
this.popUpVisible = false
|
},
|
radioChange(n) {
|
this.$emit("radioChange", n)
|
},
|
videoTypeChange(item) {
|
this.query.videoType = item.value
|
},
|
statusChange(item) {
|
this.query.status = item.value
|
},
|
cameraChange(item) {
|
this.query.camera = item.value
|
},
|
/**
|
* 重置
|
*/
|
reset() {
|
this.query = {
|
videoTypeLabel: "全部",
|
videoType: "1",
|
statusLabel: "全部",
|
status: "1",
|
cameraLabel: "全部",
|
camera: "1"
|
}
|
},
|
submit() {
|
this.$emit("radioChange", this.query)
|
},
|
regionChange(region) {
|
this.basCode = region.adCode
|
|
this.$emit("regionChange", region)
|
},
|
basinChange(basin) {
|
console.log(basin)
|
this.$emit("basinChange", basin)
|
},
|
sendSearchKey() {
|
this.$emit("getKey", this.searchKey)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.select-group {
|
display: flex;
|
// margin: 10rpx 0;
|
height: 100%;
|
// margin: 0 30rpx;
|
// width: 670rpx;
|
// box-shadow: 0px 0px 20rpx #e2e2e2;
|
border-radius: 10rpx;
|
background-color: #ffffff;
|
padding: 15rpx;
|
|
.item {
|
display: flex;
|
align-items: center;
|
flex: 1;
|
margin-right: -150rpx;
|
}
|
|
.condition {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
|
.region-text {
|
width: 95%;
|
height: 66rpx;
|
background-color: #F5F5F5;
|
display: flex;
|
align-items: center;
|
border-radius: 8rpx;
|
|
.area-box {
|
display: flex;
|
align-items: center;
|
}
|
|
.basin-box {
|
display: flex;
|
align-items: center;
|
}
|
|
.text {
|
margin-left: 20rpx;
|
color: #333333;
|
font-family: PingFang-SC-Medium;
|
font-size: 30rpx;
|
}
|
|
.img-icon {
|
display: flex;
|
width: 22rpx;
|
height: 18rpx;
|
}
|
}
|
|
.img-icon {
|
width: 40rpx;
|
height: 40rpx;
|
padding: 0 20rpx;
|
}
|
|
}
|
}
|
|
.order {
|
width: 500rpx;
|
|
padding: 30rpx;
|
|
.title {
|
margin-bottom: 50rpx;
|
}
|
}
|
|
.query {
|
width: 500rpx;
|
|
padding: 30rpx;
|
|
.title {
|
margin-bottom: 50rpx;
|
}
|
|
.btn-group {
|
display: flex;
|
}
|
}
|
</style>
|
