diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index c37fa5a..27da63b 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,15 +1,20 @@
 <template>
 	<view class="index-page bg-page">
-		<view class="menus-section" v-for="(menu,index) in menuList" :key="index">
-			<view class="title-t">{{menu.label}}</view>
-			<view class="menu-ul">
-				<view class="menu-li" v-for="(cdm,i) in menu.children" :key="i">
-					<view class="menu_item" @click="linknavFn(cdm)">
-						<view class="icon"></view>
-						<view class="name">{{cdm.label}}</view>
+		<view class="banner-section">
+			<image class="banner_img" mode="scaleToFill" src="../../static/img/banner_img.png"></image>
+		</view>
+		<view class="content-box">
+			<view class="menus-section" v-for="(menu,index) in menuList" :key="index">
+				<view class="title-t">{{menu.label}}</view>
+				<view class="menu-ul">
+					<view class="menu-li" v-for="(cdm,i) in menu.children" :key="i">
+						<view class="menu_item" @click="linknavFn(cdm)">
+							<view class="icon"></view>
+							<view class="name">{{cdm.label}}</view>
+						</view>
 					</view>
+					
 				</view>
-				
 			</view>
 		</view>
 	</view>
@@ -120,9 +125,17 @@
 </script>
 
 <style lang="scss" scoped>
+.banner-section{
+	.banner_img{
+		width: 100%;
+		height: 280rpx;
+	}
+}
 .index-page{
 	background-color: #f8f8f8;
-	padding-top: 40rpx;
+	.content-box{
+		padding-top: 30rpx;
+	}
 }
 .menus-section{
 	padding: 20rpx;
@@ -131,6 +144,8 @@
 	.title-t{
 		margin-bottom: 24rpx;
 		padding: 0 10rpx;
+		font-size: 28rpx;
+		font-weight: bold;
 	}
 }
 .menu-ul{
diff --git a/src/pages/index/monitor.vue b/src/pages/index/monitor.vue
index e5e6849..2443670 100644
--- a/src/pages/index/monitor.vue
+++ b/src/pages/index/monitor.vue
@@ -1,6 +1,40 @@
 <template>
-	<view class="monitor-page">
-		
+	<view class="monitor-page bg-page" >
+		<view class="utab-section">
+			<u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
+		</view>
+		<view class="secreen-section">
+			<u-dropdown class="dropdown-box" ref="uDropdown" @open="openDropDown">
+				<u-dropdown-item v-model="addressValue" title="基地" 
+				 height="700rpx" 
+				:options="deviceAddressList" @change="change"></u-dropdown-item>
+				<u-dropdown-item v-model="device_id" title="检测点" height="700rpx"
+				:options="options2" @change="change2"></u-dropdown-item>
+				<u-dropdown-item v-if="current==0" v-model="is_recommend" title="推荐"
+				:options="options3" @change="change3"></u-dropdown-item>
+				<u-dropdown-item v-if="current==1" title="日期">
+					<view class="slot-content" style="background-color: #FFFFFF;">
+						<view class="select-date u-border-bottom" >
+							<view class="name" @click="calendarShow = true">
+								<u-icon name="calendar" color="#333" size="32"></u-icon>
+								<text style="margin-left: 6rpx;">选择日期：</text>
+							</view>
+							<view class="time_box">
+								<view class="tip_txt" v-if="!start_date_c"
+								@click="calendarShow = true">开始日期-结束日期</view>
+								<view class="tile_val" v-else
+								@click="calendarShow = true">{{start_date_c}} ~ {{end_date_c}}</view>
+								<view class="delete_btn" v-if="start_date_c" @click="deleteDateFn()">
+									<u-icon name="close-circle" color="#333" size="34"></u-icon>
+								</view>
+							</view>
+							
+						</view>
+						<u-button type="primary" @click="selectedDateConform()">确定</u-button>
+					</view>
+				</u-dropdown-item>
+			</u-dropdown>
+		</view>
 	</view>
 </template>
 
@@ -8,18 +42,174 @@
 	export default {
 		data() {
 			return {
-				
+				list:[
+					{
+						name: '监控'
+					}, 
+					{
+						name: '视频'
+					}, 
+				],
+				current:0,
+				//筛选
+				q_start_time:'',
+				q_end_time:'',
+				deviceAddressList:[],//筛选设备地区列表
+				addressName:'',
+				addressValue:'',
+				device_id:'',//检测点 - options2中的设备id
+				options2:[],
+				calendarShow:false,//选择日期
+				start_date_c:'',
+				end_date_c:'',
+				device_type:1,//监控
+				is_recommend:0,
+				options3:[
+					{
+						label: '全部',
+						value: 0,
+					},
+					{
+						label: '推荐',
+						value: 1,
+					}
+				],
+				per_page:10,
+				page:1,
 			};
 		},
 		onLoad(){
-			
+			this.queryDeviceBasics();
 		},
 		methods:{
+			sectionChange(index) {
+				this.current = index;
+			},
+			//地区
+			change(val){
+				console.log(val);
+				let narray = this.deviceAddressList.filter(item=>{
+					return item.value==val;
+				})
+				console.log(narray);
+				this.addressName = narray[0].name;
+				this.queryAddressDevicePoints(val);
+				
+			},
 			
+			//地区下设备id
+			change2(val){
+				console.log(val)
+				this.queryDevices();
+			},
+			change3(val){
+				this.queryDevices();
+			},
+			//日期范围
+			calendarChange(e){
+				console.log(e,'日期范围')
+				this.start_date_c = e.startDate;
+				this.end_date_c = e.endDate;
+			},
+			//删除选择的时间
+			deleteDateFn(){
+				this.start_date_c = '';
+				this.end_date_c = '';
+			},
+			//时间筛选
+			openDropDown(index){
+				console.log(index,'openDropDown');
+				if(index==2){//日期
+					this.start_date_c = this.q_start_time;
+					this.end_date_c = this.q_end_time;
+				}
+			},
+			//查询监测视频
+			queryDevices(){
+				let params = {
+					type:this.device_type,
+					base:this.addressValue,
+					status:1,//在线
+					per_page:this.per_page,
+					page:this.page,
+					_t: new Date().getTime()
+				}
+				if(this.device_id){
+					params['point'] = this.device_id;
+				}
+				if(this.is_recommend){
+					params['is_recommend'] = this.is_recommend;
+				}
+				this.$http.get('/api/devices',{params:params}).then(({data})=>{
+					console.log(data);
+					if(data.code==200){
+						
+					}
+				}).catch(()=>{
+					
+				})
+			},
+			//查询地址筛选
+			queryDeviceBasics(){
+				let params = {
+					device_type:this.device_type,
+					_t: new Date().getTime()
+				}
+				this.$http.get('/api/agricultural-device-basic',{params:params}).then(({data})=>{
+					console.log(data);
+					if(data.code==200){
+						let _data = data.data;
+						for(let item of _data){
+							item['label'] = item.name;
+							item['value'] = item.id;
+						}
+						
+						this.deviceAddressList = _data;
+						this.addressValue = _data[0].id;
+						this.addressName = _data[0].name;
+						
+						this.queryAddressDevicePoints(this.addressValue);
+					}
+				}).catch(()=>{
+					
+				})
+			},
+			//查询地址下的设备监控点
+			queryAddressDevicePoints(id){
+				let params = {
+					device_type:this.device_type,
+					agricultural_basic:id,
+					_t: new Date().getTime()
+				}
+				this.$http.get(`/api/agricultural-device-point/${id}`,{params:params}).then(({data})=>{
+					console.log(data);
+					if(data.code==200){
+						let _data = data.data;
+						let options = [];
+						for(let k in _data){
+							let item = {};
+							item['label'] = _data[k];
+							item['value'] = _data[k];
+							options.push(item);
+						}
+						this.options2 = options;
+						this.device_id = options[0].value;
+						console.log(this.options2,this.device_id,'this.options2')
+						this.queryDevices();
+					}
+				}).catch(()=>{
+					
+				})
+			},
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-
+.monitor-page{
+	background-color: #fafafa;
+}
+.utab-section{
+	padding: 30rpx;
+}
 </style>
diff --git a/src/pages/index/water-quality.vue b/src/pages/index/water-quality.vue
index a1b1cda..2b82b35 100644
--- a/src/pages/index/water-quality.vue
+++ b/src/pages/index/water-quality.vue
@@ -163,7 +163,7 @@
 					<view class="form_cont">
 						<u-form v-for="(info,k) in formInfo" :key="k">
 							<view class="title2 u-border-bottom">{{keyToName[k]}}</view>
-							<u-form-item v-for="(cd2,k2) in info" 
+							<u-form-item v-for="(cd2,k2) in info"
 							:label="numberToString[k2]+'级预警'" label-width="140" :key="k2">
 								<view class="row" >
 									<view class="input_box flex-row u-margin-bottom-20"
diff --git a/src/static/img/banner_img.png b/src/static/img/banner_img.png
new file mode 100644
index 0000000..57169b3
Binary files /dev/null and b/src/static/img/banner_img.png differ