根据新需求页面新增，封装站点列表组件

common/common.scss

@@ -278,4 +278,33 @@ radio,checkbox {
 		bottom: 44rpx;
 		z-index: 999;
 		background-color: #ffffff;
-	}
+	}
+	
+	
+	
+	// 权限新增
+	.siteItems{
+		z-index:999;
+		position:absolute;
+		border:1px solid #eee;
+		width:100%;
+		.site-item{
+			background:#fff;
+			padding:10rpx;
+			
+		}
+		
+	}
+	.selectedBox .cuIcon-close{
+		position:relative;
+		top:3rpx;
+		right:-10rpx;
+	}
+	.noResult{
+		padding:0 20rpx;
+		font-size:28rpx;
+		color:#aaa
+	}
+	
+	
+	

components/list-test/list-test.vue

@@ -0,0 +1,120 @@
+<template>
+	<view  class="site-wrapper" ref="contentWrapper">
+		
+		<!-- 筛选框start -->
+		<view class="ding">
+			<view class="cu-bar search bg-gray filter-section">
+				<view class="search-form round bg-white">
+					<text class="cuIcon-search"></text>
+					<input class="" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="请输入站点名称"
+					 confirm-type="search"></input>
+				</view>
+				<view class="action">
+					<button class="cu-btn bg-blue round">查询</button>
+				</view>
+			</view>
+		</view>
+		<!-- 筛选框end -->
+		
+		<!-- 站点列表start -->
+		<view class="site-items">
+			<view class="cu-list menu-avatar">
+				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in nowData"
+				 :key="index" :data-target="'move-box-' + index">
+					<view class="cu-avatar round lg"  v-bind:style="{ 'background-image': 'url(' + nowIcon+ ')' }"></view>
+					<view class="content"  @tap="goNowUrl" v-if="nowType==0">
+						<view class="text-grey site-tit">
+							{{item.siteName}}
+							<text> 
+							   （{{nowNum}}）
+							</text>
+						</view>
+					</view>
+					
+					<view class="content" v-else  @tap="goNowUrl" @longpress="showDetail(item)">
+						<view class="text-grey site-tit">
+							{{item.siteName}}
+							<text>（共3个设备）</text>
+						</view>
+						<view class="showDetail" v-if="item.isShow" @tap.stop="goSiteDetail" >查看详情</view>
+					</view>
+					
+					<view class="nav-right num">
+						<view class="text-grey">
+							<text class="icon iconfont margin-right-xs margin-left-lg">&#xe629;</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 站点列表end -->
+	
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		// name: 'listTest',
+		props:{
+			bindType:{
+				type:Number,
+				default: ''
+			},
+			bindData:{
+				type:Array,
+				default: ''
+			},
+			bindUrl:{
+				type:String,
+				default: ''
+			},
+			bindIcon:{
+				type:String,
+				default: ''
+			},
+			bindNum:{
+				type:String,
+				default: ''
+			},
+		},
+		data() {
+			return {
+				modalName: null,
+				nowData:this.bindData,
+				nowUrl:this.bindUrl,
+				nowIcon:this.bindIcon,
+				nowNum:this.bindNum,
+				nowType:this.bindType
+				
+			};
+		},
+		onPullDownRefresh() {
+			console.log('refresh');
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+		methods:{
+			// 页面跳转
+			goNowUrl() {
+				uni.navigateTo({
+					url: this.nowUrl,
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			},
+			InputFocus(e) {
+				this.InputBottom = e.detail.height
+			},
+			InputBlur(e) {
+				this.InputBottom = 0
+			},
+		}
+	}
+</script>
+
+<style>
+
+</style>

data/json.js

@@ -1,7 +1,8 @@
 // 本地模拟json数据
 let siteListData = [{
 		"id": 1,
-		"siteName": '测试站点一'
+		"siteName": '测试站点一',
+		
 	},
 	{
 		"id": 2,
@@ -13,7 +14,8 @@ let siteListData = [{
 	},
 	{
 		"id": 4,
-		"siteName": '测试站点四'
+		"siteName": '测试站点四',
+		"iconUrl":"../../static/site-icon-alarm.png",
 	},
 	{
 		"id": 5,

pages.json

@@ -47,7 +47,7 @@
 		{
 			"path": "pages/siteList/siteList",
 			"style": {
-				"navigationBarTitleText": "站点列表",
+				"navigationBarTitleText": "运行监测",
 				"enablePullDownRefresh": true
 			}
 		},
@@ -284,6 +284,17 @@
             }
             
         }
+        
+        ,{
+            "path" : "pages/siteListAlarming/siteListAlarming",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "综合报警",
+                "enablePullDownRefresh": true
+            }
+            
+        }
+		
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/add/add.vue

@@ -1,38 +1,38 @@
 <template>
-	<view class="appWrapper">
-		<form action="" v-if="type==1" @submit="formSubmit">
-			<view class="form-item margin-top">
-				<view class="title">
-					<text class="necessary">*</text>
-					用户名称:
-				</view>
-				<input name="userName" v-model="formMess.userName"></input>
-			</view>
-			<view class="form-item">
-				<view class="title">地址:</view>
-				<input name="input" v-model="formMess.place"></input>
-			</view>
-			<view class="form-item">
-				<view class="title">经度:</view>
-				<input name="input" v-model="formMess.longitude"></input>
-			</view>
-			<view class="form-item">
-				<view class="title">维度:</view>
-				<input name="input" v-model="formMess.dimension"></input>
-			</view>
-			<view class="form-item">
-				<view class="title">联系人:</view>
-				<input name="input" v-model="formMess.contactor"></input>
-			</view>
-			<view class="form-item">
-				<view class="title">手机号码:</view>
-				<input name="input" v-model="formMess.mobile"></input>
-			</view>
-		
-		
-			<view class="btn-area submitBottomBtn padding-lr-sm">
-				<button class="bg-blue round  margin-top" form-type="submit">提 交 </button>
-			</view>
+	<view class="appWrapper">
+		<form action="" v-if="type==1" @submit="formSubmit">
+			<view class="form-item margin-top">
+				<view class="title">
+					<text class="necessary">*</text>
+					用户名称:
+				</view>
+				<input name="userName" v-model="formMess.userName"></input>
+			</view>
+			<view class="form-item">
+				<view class="title">地址:</view>
+				<input name="input" v-model="formMess.place"></input>
+			</view>
+			<view class="form-item">
+				<view class="title">经度:</view>
+				<input name="input" v-model="formMess.longitude"></input>
+			</view>
+			<view class="form-item">
+				<view class="title">维度:</view>
+				<input name="input" v-model="formMess.dimension"></input>
+			</view>
+			<view class="form-item">
+				<view class="title">联系人:</view>
+				<input name="input" v-model="formMess.contactor"></input>
+			</view>
+			<view class="form-item">
+				<view class="title">手机号码:</view>
+				<input name="input" v-model="formMess.mobile"></input>
+			</view>
+
+
+			<view class="btn-area submitBottomBtn padding-lr-sm">
+				<button class="bg-blue round  margin-top" form-type="submit">提 交 </button>
+			</view>
 		</form>
 		<form action="" v-else-if="type==2">
 			<view class="form-item margin-top">
@@ -78,7 +78,7 @@
 				<button class="bg-blue round  margin-top">提 交 </button>
 			</view>
 		</form>
-		
+
 		<form action="" v-else>
 			<view class="form-item margin-top">
 				<view class="title">
@@ -88,30 +88,28 @@
 				<input name="userName" v-model="formMess.userName"></input>
 			</view>
 			<view class="form-item">
-				<view class="title">
-					<text class="necessary">*</text>
-					站点:
+				<view class="title " style="vertical-align:top">
+					<text class="necessary">*</text>
+					站点:
 				</view>
-		
-				<!-- <yealuo-select the-style="margin: 20upx auto;font-size: 46upx;"
-				value="选项2" 
-				item-key="value" 
-				placeholder='请输入内容' 
-				:binData="data2"
-				checkType="checkbox"
-				tags="name"
-				inputStyle=""
-				selectStyle=""
-				overflow="hide"
-				@getBackVal="getBackVal"
-				:selectIco="true"
-				>
-				</yealuo-select> -->
-				<select name="" id="">
-					<option value="">站点一</option>
-					<option value="">站点二</option>
-					<option value="">站点三</option>
-				</select>
+				<view style="position:relative">
+					<input name="siteName" v-model="formMess.siteName" @focus="test" @input="handleInput()" placeholder="请选择"></input>
+					
+					<view class="siteItems" v-if="isShow">
+						<view class=" site-item" v-if="!newDataList.length">暂无结果</view>
+						
+						<view class="site-item" v-for="(item,index) in newDataList" @click="add(item,index)" :key="index">{{item}}</view>
+					</view>
+					<view style="width:500rpx" class="selectedBox">
+						<button class="cu-btn  sm margin-xs" v-for="(item,index) in selectedData" @click="deleteItem(item,index)">
+						{{item}}
+						<text class="lg text-gray cuIcon-close"></text>
+						</button>
+
+					</view>
+				</view>
+
+
 			</view>
 
 			<view class="form-item margin-top">
@@ -119,7 +117,6 @@
 					<text class="necessary">*</text>
 					告警类型
 				</view>
-
 				<radio-group name="gender">
 					<label class="margin-right">
 						<radio value="全部告警" checked /><text>全部告警</text>
@@ -141,37 +138,30 @@
 <script>
 	var graceChecker = require("../../common/graceChecker.js");
 	// import add from '../../common/select.js';
-	export default {
-		
+	export default {
+
 		data() {
 			return {
 				index: -1,
 				picker: ['楼层一', '楼层二', '楼层三'],
 				type: '0',
 
-
+				isShow: false,
 				formMess: {
 					"userName": "sss",
+					"siteName": "",
 					"place": "",
 					"longitude": "",
 					"dimension": "",
 					"contactor": "",
 					"mobile": "",
-				},
-				
-				// 站点多选下拉
-				data2: [
-					{id: 1, value: '选项1'},
-					{id: 2, value: '选项2'},
-					{id: 3, value: '选项3'},
-					{id: 4, value: '选项4'},
-					{id: 5, value: '选项5'},
-					{id: 6, value: '这是6'},
-					{id: 7, value: '这是7'},
-					{id: 8, value: '这是8'},
-					{id: 9, value: '这是9'},
-					{id: 10, value: '这是10'},
-				],
+				},
+
+				// 站点多选下拉
+				siteItemData: ["站点一", "站点二", "站点三", "站点四", "站点五", "站点六"],
+				newDataList: ["站点一", "站点二", "站点三", "站点四", "站点五", "站点六"],
+
+				selectedData: [],
 				// 站点多选下拉 end
 
 
@@ -192,20 +182,39 @@
 				uni.setNavigationBarTitle({
 					title: '权限新增'
 				});
-
 			}
+		},
+		methods: {
+			add: function(item, index) {
+				this.selectedData.push(item);
+				this.newDataList.splice(index, 1);
+				this.isShow = false;
+				this.formMess.siteName=''
+			},
+			deleteItem: function(item, index) {
+				// this.selectedData.remove(item);
+				this.selectedData.splice(index, 1);
+				this.newDataList.push(item);
+				
+
+			},
+
+			// 站点多选下拉
+			test: function() {
+				this.isShow = !this.isShow;
+			},
+			test2: function() {
+				this.isShow = false;
+			},
+			handleInput() {
+				// var newlist = this.siteItemData.filter(item => item.indexOf(this.formMess.siteName) > -1)
+				// this.newDataList = newlist;
+				// console.log(this.newDataList)
+			},
+			// 站点多选下拉 end
 
 
 
-		},
-		methods: {
-			// 站点多选下拉
-			getBackVal:function(e){
-				console.log(e)
-			},
-			// 站点多选下拉 end
-			
-			
 			formSubmit: function(e) {
 				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
 				//定义表单规则
@@ -291,7 +300,7 @@
 	.form-item {
 		padding: 0 40rpx;
 		display: flex;
-		align-items: center;
+		align-items: top;
 		margin-bottom: 20rpx;
 
 

pages/index/index.vue

@@ -134,10 +134,10 @@
 				let url = "";
 				switch (index) {
 					case 0:
-						url = "/pages/siteList/siteList?type=1"
+						url = "/pages/siteListAlarming/siteListAlarming"
 						break;
 					case 1:
-						url = "/pages/siteList/siteList?type=2"
+						url = "/pages/siteList/siteList"
 						break;
 					default:
 						break;

pages/siteList/siteList.vue

@@ -34,7 +34,6 @@
 						<view class="text-grey site-tit">
 							{{item.siteName}}
 							<text>（共3个设备）</text>
-
 						</view>
 						<view class="showDetail" v-if="item.isShow" @tap.stop="goSiteDetail" >查看详情</view>
 					</view>
@@ -60,8 +59,6 @@
 		data() {
 			return {
 				type: '0',
-				show:'false',
-
 				siteListData: json.siteListData,
 				modalName: null,
 				listTouchStart: 0,
@@ -70,19 +67,7 @@
 			};
 		},
 
-		onLoad: function(option) {
-			console.log(option.type); //打印出上个页面传递的参数。
-			this.type = option.type;
-			if (option.type == 1) {
-				uni.setNavigationBarTitle({
-					title: '综合报警'
-				});
-			} else {
-				uni.setNavigationBarTitle({
-					title: '运行监测'
-				});
-			}
-		},
+		
 		onPullDownRefresh() {
 			console.log('refresh');
 			setTimeout(function() {
@@ -90,33 +75,31 @@
 			}, 1000);
 		},
 		computed: {
-
-
 			newSiteListData() {
-
 				return this.siteListData.map(item => {
 					this.$set(item, "isShow", false)
 					return item
 				})
 			}
-			
-			
-	
-			
-			
+
+		},
+		
+		mounted() {
+			document.addEventListener('click', (e) => {
+				if (e.target.className != 'showDetail') {
+					this.siteListData.forEach(item => {
+						item.isShow = false
+					})
+				}
+			})
 		},
 
 	
-		methods: {
-			
-
+		methods: {
 			// 隐藏显示
 			showDetail(e) {
 				// 存储点击那一项的状态
-				const nowStatu = e.isShow;
-				
-				this.show=e.isShow;
-				
+				const nowStatu = e.isShow;
 				// 将每一项列表的isShow设置为false,让所有的列表都隐藏
 				this.siteListData.forEach(item => {
 					item.isShow = false
@@ -124,11 +107,6 @@
 				// 用于再次点击该项的取反
 				e.isShow = !nowStatu
 			},
-
-
-
-
-
 			InputFocus(e) {
 				this.InputBottom = e.detail.height
 			},

pages/siteListAlarming/siteListAlarming.vue

@@ -0,0 +1,45 @@
+<template>
+	<list-test :bindData="siteListData" :bindUrl="linkUrl" :bindIcon="linkIcon" :bindNum="num" :bindType="type">
+	</list-test>
+
+</template>
+
+<script>
+	import json from '../../data/json.js';
+
+	export default {
+
+		data() {
+			return {
+				type: 0,
+				linkUrl: '/pages/alarmingList/alarmingList',
+				linkIcon:'../../static/site-icon-alarm.png',
+				siteListData: json.siteListData,
+				num:' 共3个未处理告警'
+			};
+		},
+
+
+		onPullDownRefresh() {
+			console.log('refresh');
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+		computed: {
+		
+		},
+
+		mounted() {
+		},
+
+
+		methods: {
+		}
+
+	}
+</script>
+
+<style>
+
+</style>

pages/test/test.vue

@@ -1,15 +1,20 @@
 <template>
 	<view>
 
+		<!-- <input type="text"   v-model="searchVal" >
+		<view>
+			<view v-for="(item,index) in NewItems" :key="index" :value="item.value" v-text="item.name"></view>
+		</view> -->
+
+
+		<input type="text" @input="handleInput()" v-model="mytext">
 		<ul>
-			<li v-for="(item,index) in data1">
-				<span @click.stop="toggle(index)"></span>
-				<span>{{item.id}}</span>--
-				<span>{{item.name}}</span>
-				<div v-show="(cIndex == index) && dialog" class="modalDiaLog">dialog</div>
+			<li v-for="data in datalist">
+				{{data}}
 			</li>
 		</ul>
 
+
 	</view>
 </template>
 
@@ -17,42 +22,87 @@
 	export default {
 		data() {
 			return {
-
-				dialog: false,
-				cIndex: -1,
-				data1: [{
-						id: 1,
-						name: "a"
-					},
-					{
-						id: 2,
-						name: "b"
-					},
-					{
-						id: 3,
-						name: "c"
-					},
-					{
-						id: 4,
-						name: "d"
-					},
-				]
+				mytext: '',
+				// searchVal:'',
+				// items: [
+				// 	{name: 1, value: '站点1'},
+				// 	{name: 2, value: '站点2'},
+				// 	{name: 3, value: '站点3'},
+				// 	{name: 4, value: '站点4'},
+				// 	{name: 5, value: '站点5'},
+				// 	{name: 6, value: '站点6'},
+				// 	{name: 7, value: '站点7'},
+				// 	{name: 8, value: '站点8'},
+				// 	{name: 9, value: '站点9'},
+				// 	{name: 10, value: '站点10'},
+				// ],
+				// NewItems:[
+				// 	{name: 10, value: '站点10'}
+				// ],
+				datalist: ["aaa", "bbb", "ccc", "eee", "eac", "date"],
+				list: ["aaa", "bbb", "ccc", "eee", "eac", "date"]
 
 			}
 		},
-		mounted() {
-			document.addEventListener('click', (e) => {
-				if (e.target.className != 'modalDiaLog') {
-					this.dialog = false;
-				}
-			})
+		// watch:{
+
+
+		// 	searchVal: {
+		// 	  	handler: function(val, oldVal) {
+		// 	  	  //这时候 o = 岑先生、u = 不认识	
+		// 	      this.items.map(function(item){
+		// 	      						   // console.log('===='+item.name)
+		// 								   // console.log('data===')
+		// 								   // console.log(this.$data)
+		// 	      	if(item.value.search(val)!=-1){
+		// 	      							console.log('this is new items')
+		// 	      							console.log(this.NewItems);
+		// 	      		this.NewItems.push(item);
+		// 	      	}
+
+		// 	      })
+		// 	    },
+		// 	    deep: true
+		// 	  }
+
+
+		// 	searchVal(val, oldVal){
+
+		// 	           this.items.map(function(item){
+		// 	           	if(item.value.search(val)!=-1){
+		// 					console.log('this is new items')
+		// 					console.log(this.NewItems);
+		// 	           		this.NewItems.push(item);
+		// 	           	}
+
+
+		// 	           })
+		// 	     }
+
+		// },
+		computed: {
+			// newItems(){
+
+			// 	var_this=this;
+			// 	var NewItems=[];
+			// 	this.items.map(function(item){
+			// 		if(item.name.search(_this.searchVal)!=-1){
+			// 			NewItems.push(item);
+			// 		}
+
+			// 	})
+			// 	return NewItems
+			// }
+
 		},
 		methods: {
-			toggle(index) {
-				this.cIndex = index;
-				this.dialog = !this.dialog;
+
+			handleInput() {
+				var newlist = this.list.filter(item => item.indexOf(this.mytext) > -1)
+				this.datalist = newlist
 			}
 
+
 		}
 	}
 </script>