新需求增加排版

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+uni_modules
+unpackage

App.vue

@@ -9,7 +9,10 @@
 		onHide: function() {
 			console.log('App Hide')
 		}
-	}
+	}
+	
+	
+	
 </script>
 
 <style>
@@ -18,11 +21,20 @@
 	@import "colorui/icon.css";
 	@import "static/iconfont/iconfont.css";
 	
+	/* 解决头条小程序组件内引入字体不生效的问题 */
+	/* #ifdef MP-TOUTIAO */
+	@font-face {
+		font-family: uniicons;
+		src: url('/static/uni.ttf');
+	}
+	/* #endif */
+	
 	
 
  </style>
 
 <style lang="scss">
-	@import "common/common.scss";
+	@import "common/common.scss";
+	
 </style>
 

common/common.scss

@@ -4,7 +4,7 @@ body {
 }
 
 radio,checkbox {
-			transform: scale(0.77)
+			transform: scale(0.7)
 }
 /* 画面监控引入特殊字体 */
 	@font-face {

common/graceChecker.js

@@ -0,0 +1,97 @@
+/**
+数据验证（表单验证）
+来自 grace.hcoder.net 
+作者 hcoder 深海
+*/
+module.exports = {
+	error:'',
+	check : function (data, rule){
+		for(var i = 0; i < rule.length; i++){
+			if (!rule[i].checkType){return true;}
+			if (!rule[i].name) {return true;}
+			if (!rule[i].errorMsg) {return true;}
+			if (!data[rule[i].name]) {this.error = rule[i].errorMsg; return false;}
+			switch (rule[i].checkType){
+				case 'string':
+					var reg = new RegExp('^.{' + rule[i].checkRule + '}$');
+					if(!reg.test(data[rule[i].name])) {this.error = rule[i].errorMsg; return false;}
+				break;
+				case 'int':
+					var reg = new RegExp('^(-[1-9]|[1-9])[0-9]{' + rule[i].checkRule + '}$');
+					if(!reg.test(data[rule[i].name])) {this.error = rule[i].errorMsg; return false;}
+					break;
+				break;
+				case 'between':
+					if (!this.isNumber(data[rule[i].name])){
+						this.error = rule[i].errorMsg;
+						return false;
+					}
+					var minMax = rule[i].checkRule.split(',');
+					minMax[0] = Number(minMax[0]);
+					minMax[1] = Number(minMax[1]);
+					if (data[rule[i].name] > minMax[1] || data[rule[i].name] < minMax[0]) {
+						this.error = rule[i].errorMsg;
+						return false;
+					}
+				break;
+				case 'betweenD':
+					var reg = /^-?[1-9][0-9]?$/;
+					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
+					var minMax = rule[i].checkRule.split(',');
+					minMax[0] = Number(minMax[0]);
+					minMax[1] = Number(minMax[1]);
+					if (data[rule[i].name] > minMax[1] || data[rule[i].name] < minMax[0]) {
+						this.error = rule[i].errorMsg;
+						return false;
+					}
+				break;
+				case 'betweenF': 
+					var reg = /^-?[0-9][0-9]?.+[0-9]+$/;
+					if (!reg.test(data[rule[i].name])){this.error = rule[i].errorMsg; return false;}
+					var minMax = rule[i].checkRule.split(',');
+					minMax[0] = Number(minMax[0]);
+					minMax[1] = Number(minMax[1]);
+					if (data[rule[i].name] > minMax[1] || data[rule[i].name] < minMax[0]) {
+						this.error = rule[i].errorMsg;
+						return false;
+					}
+				break;
+				case 'same':
+					if (data[rule[i].name] != rule[i].checkRule) { this.error = rule[i].errorMsg; return false;}
+				break;
+				case 'notsame':
+					if (data[rule[i].name] == rule[i].checkRule) { this.error = rule[i].errorMsg; return false; }
+				break;
+				case 'email':
+					var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
+					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
+				break;
+				case 'phoneno':
+					var reg = /^1[0-9]{10,10}$/;
+					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
+				break;
+				case 'zipcode':
+					var reg = /^[0-9]{6}$/;
+					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
+				break;
+				case 'reg':
+					var reg = new RegExp(rule[i].checkRule);
+					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
+				break;
+				case 'in':
+					if(rule[i].checkRule.indexOf(data[rule[i].name]) == -1){
+						this.error = rule[i].errorMsg; return false;
+					}
+				break;
+				case 'notnull':
+					if(data[rule[i].name] == null || data[rule[i].name].length < 1){this.error = rule[i].errorMsg; return false;}
+				break;
+			}
+		}
+		return true;
+	},
+	isNumber : function (checkVal){
+		var reg = /^-?[1-9][0-9]?.?[0-9]*$/;
+		return reg.test(checkVal);
+	}
+}

common/select.js

@@ -0,0 +1,188 @@
+var legp = function(ele) {
+	return ({
+		that: Array.prototype.slice.call(document.querySelectorAll(ele), 0),
+		stopPropagation: function(e) {
+			e = e || window.event;
+			if (e.stopPropagation) { //W3C阻止冒泡方法  
+				e.stopPropagation();
+			} else {
+				e.cancelBubble = true; //IE阻止冒泡方法  
+			}
+		},
+		hide: function() {
+			legp(ele).that.forEach(function(item) {
+				item.style.cssText += "display:none;";
+			});
+		},
+		show: function() {
+			legp(ele).that.forEach(function(item) {
+				item.style.cssText += "display:block;";
+			});
+		},
+		legp_searchList: function(name) {
+			let arr = [];
+			legp("input[name=" + name + "]").that.forEach(item => {
+				arr.push(item.value)
+			});
+			return arr;
+		},
+		legp_search: function(name, tagData) {
+			var domId = legp(ele).that[0];
+			var html =
+				"\n<div>\n<div class=\"selectId\">\n<input type=\"text\" placeholder=\"\u8F93\u5165\u6216\u9009\u62E9\" autocomplete=\"off\">\n<dl style=\"display: none;\">\n</dl>\n</div>\n</div>\n<div>\n<label style=\"line-height:30px\">已选择:</label>\n<div class=\"AD\">\n</div>\n</div>";
+			domId.innerHTML = html;
+			// domId.appendChild(dom);
+			legp(".AD").that[0].parentNode.style.cssText += "display:none;";
+			//获取当前广告
+			function myClick() {
+				legp(".selectId dl dd").that.forEach(function(item) {
+					item.onclick = function(e) {
+						var id = this.attributes.value.value;
+						if (id != '') {
+							legp(".AD").that[0].innerHTML += "<a href=\"javascript:;\" class=\"label\"><span>" + this.innerHTML +
+								"</span><input type=\"hidden\" name=\"" + name + "\" id=\"" + id + "\" value=\"" + id +
+								"\"/><span class=\"close\">x</span></a>";
+							legp(".AD").that[0].parentNode.style.cssText += "display:block;";
+							for (var i = 0; i < tagData.length; i++) {
+								if (tagData[i].id == id) {
+									tagData.splice(i, 1);
+									i = tagData.length;
+								}
+							}
+							removeAdvertising();
+						}
+						legp(".selectId dl").hide();
+						legp(".selectId input").that[0].value = '';
+						e.stopPropagation();
+					};
+				});
+			}
+			var ddRemove = function(dd) {
+				var temp = dd.nextElementSibling;
+				dd.remove();
+				if (temp != null && temp.nodeName == 'DD') {
+					ddRemove(temp);
+				}
+			};
+			//筛选
+			legp(".selectId input").that[0].oninput = function() {
+				var val = this.value; //获取input值
+				var dd = legp(".selectId dl dd").that[0];
+				if (dd == "DD") {
+					ddRemove(dd);
+				}
+				legp(".selectId dl").hide();
+				if (tagData.length > 0) {
+					legp(".selectId dl").show();
+					var sear_1 = new RegExp(val);
+					var judge_1 = false;
+					legp(".selectId dl").that[0].innerHTML = "";
+					tagData.forEach(function(item) {
+						if (sear_1.test(item.name)) {
+							judge_1 = true;
+							legp(".selectId dl").that[0].innerHTML += "<dd value=\"" + item.id + "\">" + item.name + "</dd>";
+						}
+					});
+					if (!judge_1) {
+						legp(".selectId dl").that[0].innerHTML = "<dd>\u6682\u65E0\u6570\u636E</dd>";
+					}
+					myClick();
+				}
+			};
+			//显示没被选择的
+			legp(".selectId input").that[0].onclick = function(e) {
+				var dd = legp(".selectId dl dd").that[0];
+				if (dd == "DD") {
+					ddRemove(dd);
+				}
+				if (tagData.length == 0) {
+					this.innerHTML = "暂无数据";
+				} else {
+					legp(".selectId dl").show();
+				}
+				legp(".selectId dl").that[0].innerHTML = "";
+				tagData.sort(function(a, b) {
+					return a.id - b.id;
+				});
+				tagData.forEach(function(item) {
+					legp(".selectId dl").that[0].innerHTML += "<dd value=\"" + item.id + "\">" + item.name + "</dd>";
+				});
+				myClick();
+				e.stopPropagation();
+			};
+			var AD = /** @class */ (function() {
+				function AD(name, id) {
+					this.name = name;
+					this.id = id;
+				}
+				return AD;
+			}());
+			//删除当前广告
+			function removeAdvertising() {
+				legp(".close").that.forEach(function(item) {
+					item.onclick = function() {
+						ddRemove(this.parentNode);
+						var id = this.parentNode.children[1].id;
+						var text = this.parentNode.children[0].innerHTML;
+						tagData.push(new AD(text, id));
+						if (legp(".close").that.length == 0) {
+							legp(".AD").that[0].parentNode.style.cssText += "display:none;";
+						}
+					};
+				});
+			}
+			// //封装
+			// function clickoutSide(nameClass, callback) {
+			// 	// 全局注册点击事件
+			// 	document.onclick = function (e) {
+			// 		//若点击元素为目标元素则返回
+			// 		if (e.target.className === nameClass) return
+			// 		//否则执行回调函数
+			// 		callback()
+			// 	}
+			// }
+			//隐藏
+			document.onclick = function(e) {
+				legp(".selectId dl").hide();
+				legp(".selectId input").that[0].value = "";
+			};
+		}
+	});
+};
+(function() {
+	var tagData = [{
+		"name": "站点1",
+		"id": 64
+	}, {
+		"name": "站点2",
+		"id": 65
+	}, {
+		"name": "站点3",
+		"id": 5
+	}, {
+		"name": "站点4",
+		"id": 6
+	}, {
+		"name": "站点5",
+		"id": 7
+	}, {
+		"name": "站点6",
+		"id": 8
+	}, {
+		"name": "站点7",
+		"id": 10
+	}, {
+		"name": "站点8",
+		"id": 111
+	}, {
+		"name": "站点9",
+		"id": 112
+	}, {
+		"name": "站点10",
+		"id": 113
+	}];
+
+	legp(".qwe").legp_search("fileId", tagData)
+
+
+})()

common/uni-nvue.scss

@@ -0,0 +1,96 @@
+/* 头条小程序组件内不能引入字体 */
+/* #ifdef MP-TOUTIAO */
+@font-face {
+	font-family: uniicons;
+	font-weight: normal;
+	font-style: normal;
+	src: url('~@/static/uni.ttf') format('truetype');
+}
+/* #endif */
+
+/* #ifndef APP-NVUE */
+page {
+	display: flex;
+	flex-direction: column;
+	box-sizing: border-box;
+	background-color: #efeff4;
+	min-height: 100%;
+	height: auto;
+}
+
+view {
+	font-size: 14px;
+	line-height: inherit;
+}
+
+.example {
+	padding: 0 15px 15px;
+}
+
+.example-info {
+	padding: 15px;
+	color: #3b4144;
+	background: #ffffff;
+}
+
+.example-body {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	padding: 0;
+	font-size: 14px;
+	background-color: #ffffff;
+}
+/* #endif */
+.example {
+	padding: 0 15px;
+}
+
+.example-info {
+	/* #ifndef APP-NVUE */
+	display: block;
+	/* #endif */
+	padding: 15px;
+	color: #3b4144;
+	background-color: #ffffff;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.example-info-text {
+    font-size: 14px;
+    line-height: 20px;
+	color: #3b4144;
+}
+
+
+.example-body {
+  flex-direction: column;
+  padding: 15px;
+  background-color: #ffffff;
+}
+
+.word-btn-white{
+	font-size: 18px;
+  color:#FFFFFF;
+}
+
+.word-btn {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  height: 48px;
+  margin: 15px;
+  background-color: #007AFF;
+}
+
+.word-btn--hover {
+  background-color: #4ca2ff;
+}

components/yealuo-select/yealuo-select.vue

@@ -0,0 +1,236 @@
+<template>
+	<view class="yealuo-select" >
+		<view class="yealuo-background" @tap="isShow=false" v-show="isShow"></view>
+		<view class="yealuo-con" :style="inputStyle" @tap='isShow=isShow?false:nowData.length'>
+			<slot name='left'></slot>
+			<input :disabled="theDisabled" :placeholder="placeholder" v-model="theValue" @input="theInput"  @focus="theFocus" @blur="theBlur" autocomplete="off" />
+			<slot name='right' v-if="selectIco">
+				<svg class="icon" v-if="!isShow" style="width: 1.5em; height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="530"><path d="M512 714.666667c-8.533333 0-17.066667-2.133333-23.466667-8.533334l-341.333333-341.333333c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l320 317.866667 317.866667-320c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L533.333333 704c-4.266667 8.533333-12.8 10.666667-21.333333 10.666667z" p-id="531"></path></svg>
+				<svg class="icon" v-else style="width: 1.5em; height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1927"><path d="M904.533333 674.133333l-362.666666-362.666666c-17.066667-17.066667-42.666667-17.066667-59.733334 0l-362.666666 362.666666c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733333 0L512 401.066667l332.8 332.8c8.533333 8.533333 19.2 12.8 29.866667 12.8s21.333333-4.266667 29.866666-12.8c17.066667-17.066667 17.066667-42.666667 0-59.733334z" p-id="1928"></path></svg>
+			</slot>
+		</view>
+		<view class="yealuo-select" v-show="show" :style="selectStyle">
+			<view class="data">
+				<radio-group v-if="checkType=='radio'"  @change="selectCheckbox">
+				<view class="select-item" :class="'item-'+overflow" v-for="(item, index) in nowData" :key="index" >
+					<label class="item-text" :class="{active: theValue==item.value}">
+					<radio name="name1" checked v-if="theValue==item.value" :value="item.value+'|'+item.id"></radio>
+					<radio name="name1" v-else :value="item.value+'|'+item.id"></radio>
+					{{item.value}}
+					</label>
+				</view>
+				</radio-group>
+				<checkbox-group v-else-if="checkType=='checkbox'" @change="selectCheckbox">
+				<view class="select-item" :class="'item-'+overflow" v-for="(item, index) in nowData" :key="index" >
+					<label class="item-text" :class="{active: theValue.indexOf(item.value)!=-1 }">
+					<checkbox name="name1" checked v-if="theValue.indexOf(item.value)!=-1 " :value="item.value+'|'+item.id"></checkbox>
+					<checkbox name="name1" v-else :value="item.value+'|'+item.id"></checkbox>
+					{{item.value}}
+					</label>
+				</view>
+				</checkbox-group>
+				<radio-group v-else  @change="selectCheckbox">
+				<view class="select-item" :class="'item-'+overflow" v-for="(item, index) in nowData" :key="index" >
+					<label class="item-text" :class="{active: theValue==item.value}">
+					<radio name="name1" style="display: none;" checked v-if="theValue==item.value" :value="item.value+'|'+item.id"></radio>
+					<radio name="name1" style="display: none;" v-else :value="item.value+'|'+item.id"></radio>
+					{{item.value}}
+					</label>
+				</view>
+				</radio-group>
+			</view>
+			<view class="item-close" @tap="isShow=false">收起</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * v1.0.3
+	 * 最后修改: 2021.02.02
+	 * 创建: 2020.9.30
+	 * Author:yealuo.com
+	 * contact:470797533@qq.com
+	 */
+	let fontUnit = 'upx'
+	// #ifdef MP-WEIXIN
+	fontUnit = 'rpx'
+	// #endif
+	export default {
+		name: 'yealuoInputs',
+		props: {
+			placeholder: {
+				type: String,
+				default: ''
+			},
+			value: {
+				type: String,
+				default: ''
+			},
+			checkType: {
+				type: String,
+				default: ''
+			},
+			itemKey: {
+				type: String,
+				default: ''
+			},
+			width: {
+				type: String,
+				default: '600'
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			inputStyle: {
+				type: String,
+				default: ''
+			},
+			selectStyle: {
+				type: String,
+				default: ''
+			},
+			overflow: {
+				type: String,
+				default: 'auto'
+			},
+			tags: {
+				type: String,
+				default: ''
+			},
+			
+			binData:{
+				type:Array,
+				default: ''
+			},
+			selectIco:{
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				odData:this.binData,
+				nowData:this.binData,
+				isShow: false,
+				theValue: this.value,
+				theDisabled: this.disabled
+			}
+		},
+		watch: {
+			value(val){
+				this.theValue = val;
+			},
+			//监听数据变化
+			nowData:{
+				handler:function(){
+				 this.nowData=this.binData;
+				},
+				deep:true
+			}
+			
+		},
+		computed: {
+			show(){
+				return this.isShow && this.nowData.length
+			}
+			
+		},
+		methods: {
+			//获取焦点
+			theFocus(e){
+				this.nowData=this.odData;
+			},
+			//失去焦点
+			theBlur(e){
+				this.$emit('blur',e)
+			},
+			//获取输入值
+			theInput(e) {
+				var val=e.detail.value;
+				let data = [];
+				var odData=this.odData;
+				for(var i=0;i<odData.length;i++){
+					var isHas=false;
+					if(odData[i].value.indexOf(val)!=-1){
+						data.push(odData[i])
+						if(odData[i].value==val){
+							isHas=true;
+							var arr=[];
+							arr.push(odData[i].value+"|"+odData[i].id)
+						  this.$emit('getBackVal',arr);
+						}
+					}
+					if(!isHas){
+						var arr=[];
+						arr.push(val)
+						 this.$emit('getBackVal',arr);
+					}
+				}
+				this.nowData=data;
+			},
+			//下拉选中
+			selectCheckbox(e){
+				var val=e.target.value;
+				var str=val;
+				if(typeof(str)!="string"){
+					str="";
+					for(var i=0;i<val.length;i++){
+						var vt=val[i].split("|");
+						str+=i>0?","+vt[0]:vt[0];
+					}
+				}
+				else{
+					this.isShow = false;
+					str=str.split("|")[0];
+				}
+				this.$emit('getBackVal',val+"|"+this.tags)
+				this.theValue = str;
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+.yealuo-select{
+	max-width: 100%;
+	position: relative;
+	.yealuo-background{position: fixed;top:0;left:0;width: 750upx;height: 100%;}
+	.yealuo-con{display: flex;align-items: center;justify-content: center;
+		input{flex: 1;margin: 0 6upx;}
+	}
+	
+	.yealuo-select {
+		border: 1px solid #f3f3f4;
+		position: absolute;
+		z-index: 999;
+		background: #fff;
+		width: 100%;
+		.data{
+			max-height: 600upx;
+			padding: 10upx;
+			overflow: auto;
+			.select-item {width: 100%;color:#666;
+				.item-text{ width:100%; display:block;}
+				.active{font-weight: bold;}
+			}
+			.item-auto{overflow: auto;
+				.item-text{width: max-content;}
+			}
+			.item-hide .item-text{
+				overflow: hidden;
+				text-overflow:ellipsis;
+				white-space: nowrap;
+			}
+		}
+		.item-close {
+			padding: 20upx;
+			text-align: center;
+			font-size: 32upx;
+			border-top: 1px solid #f3f3f4;
+			color:#8F8F94;
+		}
+	}
+}
+</style>

components/zzlb-mutiselect/zzlb-mutiselect.vue

@@ -0,0 +1,120 @@
+<template>
+  <view class="" style="width: 100%;">
+    <view class=" flex flex-wrap">
+      <view v-for="(item, index) in items" class="cu-tag bg-cyan radius">
+        <slot name="default" v-bind:item="item">{{ item }}</slot>
+        <text class="margin-left line-blue cuIcon-close round bg-red" @click="onremove(index)"></text>
+      </view>
+      <view class="flex ">
+        <input style1="width: 60px;" placeholder="输入..." type="text" v-model="query" @input="onshuru" @click="onquery" @keyup="onquery" />
+        <text
+          v-if="query"
+          class=" cuIcon-close "
+          @click="
+            query = '';
+            onquery();
+          "
+        ></text>
+        <text v-if="visible" class="cu-btn sm" @click="onqueren">确认</text>
+      </view>
+    </view>
+    <view v-if="visible" class="fixed bg-white">
+      <!-- <view class="flex justify-between ">
+        <button class="cu-btn " @click="visible = 0">取消</button>
+        <button class="cu-btn " @click="onqueren">确认</button>
+      </view> -->
+      <picker-view
+        class="picker-view"
+        @change="e => (pvvalue = mlist[e.detail.value[0]])"
+        indicator-style1="height:40px"
+        :style1="{ height: (mlist.length > 6 ? 6 : mlist.length / 2) * 34 + 'px' }"
+      >
+        <picker-view-column>
+          <view class="item" v-for="(item, index) in mlist" :key="index">
+            <slot name="option" v-bind:item="item">{{ item }}</slot>
+          </view>
+        </picker-view-column>
+      </picker-view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    url: { type: String, default: '' },
+    list: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    value: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      visible: 0,
+      items: [],
+      query: '',
+      mlist: [],
+      pvvalue: []
+    };
+  },
+  computed: {},
+  watch: {
+    value() {
+      this.items = this.value || [];
+    }
+  },
+  methods: {
+    onquery() {
+      console.log(this.query);
+      this.visible = 1;
+      this.pvvalue = this.mlist[0];
+
+      if (this.list && this.list.length > 0) {
+        const l = this.list.filter(f => f.indexOf(this.query) > -1);
+        if (l.indexOf(this.pvvalue) === -1) {
+          this.pvvalue = l[0];
+        }
+        this.mlist = l;
+        return;
+      }
+      this.$http.get(this.url, { params: { title: this.query } }).then(r => {
+        r.data.list;
+        this.mlist = r.data.list;
+        this.pvvalue = this.mlist[0];
+      });
+    },
+    onremove(index) {
+      this.items.splice(index, 1);
+      this.$emit('input', this.items);
+    },
+    onshuru() {
+      this.visible = 1;
+    },
+    onqueren() {
+      this.visible = 0;
+      if (this.pvvalue) this.items.push(this.pvvalue);
+      this.$emit('input', this.items);
+    }
+  }
+};
+</script>
+<style>
+.picker-view {
+  width: 100%;
+  height: 100px;
+  /* margin-top: 20rpx; */
+}
+.item {
+  /* height: 50px; */
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+</style>

main.js

@@ -15,3 +15,6 @@ const app = new Vue({
     ...App
 })
 app.$mount()
+
+
+

pages.json

@@ -47,7 +47,8 @@
 		{
 			"path": "pages/siteList/siteList",
 			"style": {
-				"navigationBarTitleText": "站点列表"
+				"navigationBarTitleText": "站点列表",
+				"enablePullDownRefresh": true
 			}
 		},
 		{
@@ -265,6 +266,24 @@
             }
             
         }
+        ,{
+            "path" : "pages/siteDetail/siteDetail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "站点详情",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/test/test",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/add-test/add-test.vue

@@ -1,122 +1,85 @@
-<template>
-	<view class="container">
-				<form @submit="formSubmit" @reset="formReset">			
-				
-					    
-							<view class="line">
-								<label style="float: left;width: 20%;text-align: center;">姓名：</label>
-								<input name="name" class="chat_input"  style="width: 70%;float: left;font-size: large;border-bottom: 1rpx solid #F1F1F1;" type="text" placeholder="请正确填写姓名..."/>
-							</view>
-					        <view class="line">
-								<view style="width: 20%;text-align: center;">性别：</view>
-								<view>
-									<radio-group name="gender">
-										<label class="radio">
-											<radio value="男" />男
-										</label>
-										<label class="radio" style="padding-left: 20rpx;">
-											<radio value="女" />女
-										</label>
-									</radio-group>
-								</view>
-							</view>
-							<view class="line">
-								<label style="float: left;padding-left: 20rpx;">出生日期：</label>
-								<input name="birth" class="chat_input" style="float: left;" type="text" placeholder="格式:2020-01-01(选填)"/>
-							</view>
-							<view class="line">
-								<label style="float: left;width: 25%;padding-left:20rpx;text-align: center;">患者电话：</label>
-								<input name="tel" class="chat_input" style="width: 70%;float: left;font-size: large;" type="text" placeholder="请填写患者或家属手机号"/>
-							</view>
-					   
-						
-							<view class="line">
-								<label style="float: left;width: 25%;padding-left:20rpx;text-align: center;">初步诊断：</label>
-								<input name="diagnose" class="chat_input" style="width: 70%;float: left;font-size: large;" type="text" placeholder="选填"/>
-							</view>
-							<view class="line">
-								<label style="float: left;width: 25%;padding-left:20rpx;text-align: center;">检查项目：</label>
-								<input name="item" class="chat_input" style="width: 70%;float: left;font-size: large;" type="text" placeholder="请填写检查、检查部位"/>
-							</view>
-						
-			
-					
-					<view style="padding-top:20rpx;padding-bottom: 400rpx;">
-						<view type="submit" w_size="600" h_size="80" text="提交预约">提交预约</view>
-					</view>
-					
-				</form>
-				
-			</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			formSubmit:function(e){
-							let tmp = JSON.stringify(e.detail.value)
-							console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
-							var formdata = e.detail.value
-							// 数据校验
-							// console.log(formdata.birth);
-							//正则表达式
-							let reg_name = /^[\u4e00-\u9fa5]{0,}$/
-							let reg_birth = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
-							let reg_tel = /(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$/
-							//结果标记
-							let sign_name = RegExp(reg_name).test(formdata.name);
-							let sign_birth = RegExp(reg_birth).test(formdata.birth);
-							let sign_tel = RegExp(reg_tel).test(formdata.tel);	
-							// console.log(sign+"，数据类型："+typeof(sign));
-							if(!sign_name||formdata.name==''){
-								this.showModal('请检查姓名');	
-							}else if(formdata.gender==''){
-								this.showModal('请选择性别')
-							}else if(!sign_birth||formdata.name==''){
-								this.showModal("请检查出生日期");
-							}else if(!sign_tel||formdata.name==''){
-								this.showModal("请检查电话号码");
-							}else if(formdata.diagnose==''){
-								this.showModal('请填写初步诊断')
-							}else if(formdata.item==''){
-								this.showModal("请填写检查部位");
-							}else{
-								uni.request({
-									url: this.$baseUrl.baseUrl+"Wxtest/ApplyCheck",
-									data: tmp,
-									method: "post",
-									success:(res)=> {
-										this.showModal(res.data.msg);
-										if (res.confirm||res.cancel) {
-											console.log('用户点击确定');
-										}
-									},
-									fail:(res)=>{
-										console.log("错误") 
-									}
-								})
-							}
-							
-						},
-						formReset: function(e) {
-							console.log('清空数据')
-						},
-						showModal:function(content){
-							uni.showModal({
-								title:'提示',
-								content:content,
-							})
-						}
-			
-		}
-	}
-</script>
-
-<style>
-
-</style>
+<template>
+	<view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<form @submit="formSubmit" @reset="formReset">
+				<view class="uni-form-item uni-column">
+					<view class="title">姓名</view>
+					<input class="uni-input" name="nickname" placeholder="请输入姓名" />
+				</view>
+				<view class="uni-form-item uni-column">
+					<view class="title">性别</view>
+					<radio-group name="gender">
+						<label>
+							<radio value="男" /><text>男</text>
+						</label>
+						<label>
+							<radio value="女" /><text>女</text>
+						</label>
+					</radio-group>
+				</view>
+				<view class="uni-form-item uni-column">
+					<view class="title">爱好</view>
+					<checkbox-group name="loves">
+						<label>
+							<checkbox value="读书" /><text>读书</text>
+						</label>
+						<label>
+							<checkbox value="写字" /><text>写字</text>
+						</label>
+					</checkbox-group>
+				</view>
+				<view class="uni-form-item uni-column">
+					<view class="title">年龄</view>
+					<slider value="20" name="age" show-value></slider>
+				</view>
+				<view class="uni-form-item uni-column">
+					<view class="title">保留选项</view>
+					<view>
+						<switch name="switch" />
+					</view>
+				</view>
+				<view class="uni-btn-v">
+					<button form-type="submit">Submit</button>
+					<button type="default" form-type="reset">Reset</button>
+				</view>
+			</form>
+		</view>
+	</view>
+</template>
+<script>
+	var  graceChecker = require("../../common/graceChecker.js");
+	export default {
+		data() {
+			return {
+			}
+		},
+		methods: {
+			formSubmit: function(e) {
+				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
+                //定义表单规则
+                var rule = [
+                    {name:"nickname", checkType : "string", checkRule:"1,3",  errorMsg:"姓名不能为空"},
+                    {name:"gender", checkType : "in", checkRule:"男,女",  errorMsg:"请选择性别"},
+                    {name:"loves", checkType : "notnull", checkRule:"",  errorMsg:"请选择爱好"}
+                ];
+                //进行表单检查
+                var formData = e.detail.value;
+                var checkRes = graceChecker.check(formData, rule);
+                if(checkRes){
+                    uni.showToast({title:"验证通过!", icon:"none"});
+                }else{
+                    uni.showToast({ title: graceChecker.error, icon: "none" });
+                }
+			},
+			formReset: function(e) {
+				console.log('清空数据')
+			}
+		}
+	}
+</script>
+
+<style>
+	.uni-form-item .title {
+		padding: 20rpx 0;
+	}
+</style>

pages/add/add.vue

@@ -1,20 +1,54 @@
 <template>
-	<view class="appWrapper">
-		<form action="" v-if="type==2">
+	<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">
 				<view class="title">
 					<text class="necessary">*</text>
 					设备编号:
 				</view>
-				<input name="input"></input>
+				<input name="input" v-model="formMess.deviceNo"></input>
 			</view>
 			<view class="form-item">
 				<view class="title">设备名称:</view>
-				<input name="input"></input>
+				<input name="input" v-model="formMess.deviceName"></input>
 			</view>
 			<view class="form-item">
 				<view class="title">安装位置:</view>
-				<input name="input"></input>
+				<input name="input" v-model="formMess.place"></input>
 			</view>
 			<view class="form-item">
 				<view class="title">所属楼层:</view>
@@ -44,50 +78,102 @@
 				<button class="bg-blue round  margin-top">提 交 </button>
 			</view>
 		</form>
+		
 		<form action="" v-else>
 			<view class="form-item margin-top">
 				<view class="title">
 					<text class="necessary">*</text>
-					用户名称:
+					角色名称
 				</view>
-				<input name="input"></input>
-			</view>
-			<view class="form-item">
-				<view class="title">地址:</view>
-				<input name="input"></input>
-			</view>
-			<view class="form-item">
-				<view class="title">经度:</view>
-				<input name="input"></input>
+				<input name="userName" v-model="formMess.userName"></input>
 			</view>
 			<view class="form-item">
-				<view class="title">维度:</view>
-				<input name="input"></input>
-			</view>
-			<view class="form-item">
-				<view class="title">联系人:</view>
-				<input name="input"></input>
+				<view class="title">
+					<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>
-			<view class="form-item">
-				<view class="title">手机号码:</view>
-				<input name="input"></input>
+
+			<view class="form-item margin-top">
+				<view class="title">
+					<text class="necessary">*</text>
+					告警类型
+				</view>
+
+				<radio-group name="gender">
+					<label class="margin-right">
+						<radio value="全部告警" checked /><text>全部告警</text>
+					</label>
+					<label>
+						<radio value="维保告警" /><text>维保告警</text>
+					</label>
+				</radio-group>
 			</view>
 
 
 			<view class="btn-area submitBottomBtn padding-lr-sm">
-				<button class="bg-blue round  margin-top">提 交 </button>
+				<button class="bg-blue round  margin-top" form-type="submit">提 交 </button>
 			</view>
 		</form>
 	</view>
 </template>
 
 <script>
-	export default {
+	var graceChecker = require("../../common/graceChecker.js");
+	// import add from '../../common/select.js';
+	export default {
+		
 		data() {
 			return {
 				index: -1,
 				picker: ['楼层一', '楼层二', '楼层三'],
-				type: '0'
+				type: '0',
+
+
+				formMess: {
+					"userName": "sss",
+					"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'},
+				],
+				// 站点多选下拉 end
+
 
 			}
 		},
@@ -98,24 +184,70 @@
 				uni.setNavigationBarTitle({
 					title: '站点新增'
 				});
-			} else {
+			} else if (option.type == 2) {
 				uni.setNavigationBarTitle({
 					title: '设备新增'
 				});
+			} else {
+				uni.setNavigationBarTitle({
+					title: '权限新增'
+				});
+
 			}
 
 
 
 		},
-		methods: {
-			PickerChange(e) {
-				this.index = e.detail.value
+		methods: {
+			// 站点多选下拉
+			getBackVal:function(e){
+				console.log(e)
+			},
+			// 站点多选下拉 end
+			
+			
+			formSubmit: function(e) {
+				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
+				//定义表单规则
+				var rule = [{
+						name: "userName",
+						checkType: "string",
+						checkRule: "1,3",
+						errorMsg: "姓名应为1-3个字符..."
+					},
+					// {name:"gender", checkType : "in", checkRule:"男,女",  errorMsg:"请选择性别"},
+					// {name:"loves", checkType : "notnull", checkRule:"",  errorMsg:"请选择爱好"}
+				];
+				//进行表单检查
+				var formData = e.detail.value;
+				var checkRes = graceChecker.check(formData, rule);
+				if (checkRes) {
+					uni.showToast({
+						title: "验证通过!",
+						icon: "none"
+					});
+				} else {
+					uni.showToast({
+						title: graceChecker.error,
+						icon: "none"
+					});
+				}
 			},
+			formReset: function(e) {
+				console.log('清空数据')
+			}
+
+
+
+
 
 		}
 	}
 </script>
 
+
+
+
 <style lang="scss">
 	.cu-form-group {
 		border-top: 0;
@@ -151,6 +283,10 @@
 		background-size: 6%;
 	}
 
+	.form-item label text {
+		position: relative;
+		top: 2rpx
+	}
 
 	.form-item {
 		padding: 0 40rpx;
@@ -182,4 +318,108 @@
 
 
 	}
+
+
+
+
+
+	/* 站点多选下拉样式 start */
+
+	.layui-btn {
+		background-color: #5fb878;
+	}
+
+	a {
+		text-decoration: none;
+	}
+
+	.label {
+		padding: 2px 0px;
+		background: #aaa;
+		border-radius: 2px;
+		color: #fff;
+		display: block;
+		line-height: 20px;
+		height: 20px;
+		margin: 2px 5px 2px 0;
+		float: left;
+	}
+
+	.label span {
+		padding: 0 5px;
+		color: #fff;
+	}
+
+	.close {
+		padding: 1px 5px !important;
+	}
+
+	.close:hover {
+		/* background-color: #009E94;
+	    border-radius: 2px;
+	    color: tomato; */
+	}
+
+	.selectId input {
+		width: 100% !important;
+	}
+
+	.selectId input {
+		height: 25px;
+		padding: 1px 5px;
+		border-radius: 3px;
+		width: calc(100% - 12px);
+		outline-color: #5fb878;
+		border: 1px solid #5fb878;
+	}
+
+	.selectId {
+		position: relative;
+	}
+
+	.selectId dl {
+		border: 1px solid #eee;
+		border-radius: 3px;
+		margin: 2px 0px;
+		max-height: 300px;
+		overflow-x: hidden;
+		white-space: nowrap;
+		position: absolute;
+		width: 100%;
+		top: 40px;
+		background: #fff;
+		z-index: 1000
+	}
+
+	.selectId dl dd {
+		margin: 0;
+		padding: 5px 10px;
+	}
+
+	.selectId dl dd:hover {
+		background-color: #5FB878;
+		color: white;
+	}
+
+	.AD {
+		/* width: 210px;
+	        margin-left: 40px; */
+		overflow-y: auto;
+		max-height: 200px;
+		/* border: 2px solid #5fb878;
+	        border-radius: 6px;
+	        padding: 1px 2px; */
+	}
+
+	form .AD span {
+		width: auto;
+	}
+
+	.siteSelect {
+		width: 71%;
+		display: inline-block;
+	}
+
+
+	/* 站点多选下拉样式end */
 </style>

pages/deviceManage/deviceDetail/deviceDetail.vue

@@ -7,9 +7,11 @@
 				<text>V</text>
 			</view>
 			<view class="device-item">
-				<text class="text-green">Ubc</text>
-				<text>12</text>
-				<text>V</text>
+				<text class="text-green">Ubc</text>
+				<text>{{12000>1000?12000/1000:12000}}</text>
+
+				<text v-if="12000>1000">KV</text>
+				<text v-else>V</text>
 			</view>
 			<view class="device-item">
 				<text class="text-red">Uca</text>

pages/setting/setting.vue

@@ -30,7 +30,7 @@
 					</view>
 				</view>
 			</view>
-			<view class="cu-item" @tap="goDeviceManage">
+			<!-- <view class="cu-item" @tap="goDeviceManage">
 				<view class="cu-avatar " style="background-image:url(../../static/setting-icon3.png)"></view>
 				<view class="content">
 					<view class="">设备管理</view>
@@ -40,6 +40,17 @@
 						<text class="icon iconfont margin-right-xs margin-left-lg">&#xe629;</text>
 					</view>
 				</view>
+			</view> -->
+			<view class="cu-item" @tap="goAuthManage">
+				<view class="cu-avatar " style="background-image:url(../../static/setting-icon4.png)"></view>
+				<view class="content">
+					<view class="">权限管理</view>
+				</view>
+				<view class="nav-right">
+					<view class="text-grey">
+						<text class="icon iconfont margin-right-xs margin-left-lg">&#xe629;</text>
+					</view>
+				</view>
 			</view>
 		</view>
 		
@@ -69,6 +80,14 @@
 					complete: () => {}
 				});
 			},
+			goAuthManage() {
+				uni.navigateTo({
+					url: '/pages/siteManage/siteManage?type=3',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			},
 			goMessagePush() {
 				uni.navigateTo({
 					url: '/pages/messagePush/messagePush',

pages/siteDetail/siteDetail.vue

@@ -0,0 +1,112 @@
+<template>
+	<view>
+
+
+		<view >
+			<!-- 基本信息start -->
+			<view class="basic-info">
+				<view class="info-tit margin-left-xs">
+					<text class="cuIcon-titles margin-right-xs"></text>
+					详细信息
+				</view>
+				<view class="info-content">
+					<view class="info-one-info ">
+						<text>站点名称：</text>
+						<text>火点侦测摄像机</text>
+					</view>
+					
+					<view>
+						<text>地址：</text>
+						<text>上海市虹口区塘沽路伍继办公室</text>
+					</view>
+					<view>
+						<text>定位：</text>
+						<text>定位地址信息</text>
+					</view>
+					<view>
+						<text>联系人：</text>
+						<text>韩正义</text>
+					</view>
+					<view>
+						<text>联系电话：</text>
+						<text>13262908433</text>
+					</view>
+				</view>
+			</view>
+			<!-- 基本信息end -->
+			
+		</view>
+		
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				radio: 'A',
+				radio: 'B',
+				modalName: null,
+		
+			}
+		},
+		
+		methods: {
+			
+			submit() {
+				uni.makePhoneCall({
+					phoneNumber: '15122423833' //仅为示例
+				});
+			},
+			mapLocation(){
+				uni.openLocation({
+					latitude: 31.469465,
+					longitude: 121.327514,
+					success: function() {
+						console.log('success');
+					}
+				});
+			},
+			
+			RadioChange(e) {
+				this.radio = e.detail.value
+			},
+			textareaAInput(e) {
+				this.textareaAValue = e.detail.value
+			},
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.timeBox {
+		height: 88rpx;
+		background: #EFF4FF;
+		line-height: 88rpx;
+
+		.time {
+			color: #333
+		}
+	}
+
+	.info-tit {
+		color: #4074E7;
+		line-height: 90rpx;
+		height: 90rpx;
+	}
+
+	// 基本信息
+	.info-content>view {
+		margin-left: 24rpx;
+		border-bottom: 1px solid #EDEDED;
+		line-height: 92rpx;
+		color: #666;
+	}
+
+	.info-content view text:first-child {
+		width: 160rpx;
+		display: inline-block
+	}
+</style>

pages/siteList/siteList.vue

@@ -1,13 +1,28 @@
 <template>
-	<view class="site-wrapper">
+	<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" style="margin-top:0">
+		<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 siteListData"
+				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in newSiteListData"
 				 :key="index" :data-target="'move-box-' + index">
-					<view class="cu-avatar round lg"  v-if="type==1"  style="background-image: url(../../static/site-icon-alarm.png);"></view>
+					<view class="cu-avatar round lg" v-if="type==1" style="background-image: url(../../static/site-icon-alarm.png);"></view>
 					<view class="cu-avatar round lg" v-else style="background-image: url(../../static/site-icon.png);"></view>
 					<view class="content" v-if="type==1" @tap="goAlarmingList">
 						<view class="text-grey site-tit">
@@ -15,16 +30,18 @@
 							<text>（共3个未处理告警）</text>
 						</view>
 					</view>
-					<view class="content" v-else @tap="goDeviceType">
+					<view class="content" v-else @tap="goDeviceType" @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 class="nav-right num">
-						<view class="text-grey">
-							<text class="icon iconfont margin-right-xs margin-left-lg">&#xe629;</text>
-						</view>
 					</view>
 				</view>
 			</view>
@@ -43,6 +60,7 @@
 		data() {
 			return {
 				type: '0',
+				show:'false',
 
 				siteListData: json.siteListData,
 				modalName: null,
@@ -54,18 +72,69 @@
 
 		onLoad: function(option) {
 			console.log(option.type); //打印出上个页面传递的参数。
-			this.type = option.type;
-			if (option.type == 1) {
-				uni.setNavigationBarTitle({
-					title: '综合报警'
-				});
-			} else {
-				uni.setNavigationBarTitle({
-					title: '运行监测'
-				});
+			this.type = option.type;
+			if (option.type == 1) {
+				uni.setNavigationBarTitle({
+					title: '综合报警'
+				});
+			} else {
+				uni.setNavigationBarTitle({
+					title: '运行监测'
+				});
 			}
 		},
-		methods: {
+		onPullDownRefresh() {
+			console.log('refresh');
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+		computed: {
+
+
+			newSiteListData() {
+
+				return this.siteListData.map(item => {
+					this.$set(item, "isShow", false)
+					return item
+				})
+			}
+			
+			
+	
+			
+			
+		},
+
+	
+		methods: {
+			
+
+			// 隐藏显示
+			showDetail(e) {
+				// 存储点击那一项的状态
+				const nowStatu = e.isShow;
+				
+				this.show=e.isShow;
+				
+				// 将每一项列表的isShow设置为false,让所有的列表都隐藏
+				this.siteListData.forEach(item => {
+					item.isShow = false
+				})
+				// 用于再次点击该项的取反
+				e.isShow = !nowStatu
+			},
+
+
+
+
+
+			InputFocus(e) {
+				this.InputBottom = e.detail.height
+			},
+			InputBlur(e) {
+				this.InputBottom = 0
+			},
 
 
 
@@ -86,6 +155,15 @@
 					complete: () => {}
 				});
 			},
+			goSiteDetail() {
+				uni.navigateTo({
+					url: '/pages/siteDetail/siteDetail',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			},
+
 
 
 
@@ -96,5 +174,16 @@
 </script>
 
 <style>
+	.showDetail {
+		position: absolute;
+		background: #fff;
+		box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
+		padding: 0rpx 32rpx;
+		border-radius: 10rpx;
+		top: 42rpx;
+		right: 0%;
+		z-index: 3000000;
+		font-size: 28rpx;
 
+	}
 </style>

pages/siteManage/siteManage.vue

@@ -13,18 +13,20 @@
 				</view>
 			</view>
 		</view>
-
 		<!-- 筛选框end -->
 
-		<!-- 站点列表start -->
+		<!-- 列表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 siteListData"
 				 :key="index" @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
 					<view class="cu-avatar round lg" style="background-image: url(../../static/site-icon.png);"></view>
-					<view class="content">
+					<view class="content" @tap="goDeviceManage"  v-if="type==1">
 						<view class="text-grey site-tit">{{item.siteName}}</view>
+					</view>
+					<view class="content" v-else>
+						<view class="text-grey site-tit">{{item.siteName}}</view>
 					</view>
 					
 					<view class="nav-right num">
@@ -40,7 +42,7 @@
 			</view>
 
 		</view>
-		<!-- 站点列表end
+		<!-- 列表end
 		
 		<!-- 新增按钮start -->
 		<view class="plus">
@@ -76,10 +78,15 @@
 				uni.setNavigationBarTitle({
 					title: '站点管理'
 				});
-			} else {
+			} else if (option.type == 2) {
 				uni.setNavigationBarTitle({
 					title: '设备管理'
 				});
+			}else{
+				uni.setNavigationBarTitle({
+					title: '权限管理'
+				});
+				
 			}
 		},
 		methods: {
@@ -92,6 +99,15 @@
 					fail: () => {},
 					complete: () => {}
 				});
+			},
+			
+			goDeviceManage() {
+				uni.navigateTo({
+					url: '/pages/siteManage/siteManage?type=2',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
 			},
 			InputFocus(e) {
 				this.InputBottom = e.detail.height

pages/test/test.vue

@@ -0,0 +1,90 @@
+<template>
+	<view>
+
+		<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>
+		</ul>
+
+	</view>
+</template>
+
+<script>
+	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"
+					},
+				]
+
+			}
+		},
+		mounted() {
+			document.addEventListener('click', (e) => {
+				if (e.target.className != 'modalDiaLog') {
+					this.dialog = false;
+				}
+			})
+		},
+		methods: {
+			toggle(index) {
+				this.cIndex = index;
+				this.dialog = !this.dialog;
+			}
+
+		}
+	}
+</script>
+
+<style>
+	ul,
+	li {
+		list-style: none;
+	}
+
+	li {
+		position: relative;
+		height: 40px;
+		line-height: 40px;
+		border-bottom: 1px solid #000;
+	}
+
+	li span:first-child {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		background-color: #000;
+	}
+
+	li div {
+		position: absolute;
+		left: 20px;
+		top: 0;
+		z-index: 1000;
+		width: 100px;
+		height: 100px;
+		border: 1px solid red;
+		background-color: #fff;
+	}
+</style>

unpackage/dist/dev/app-plus/static/iconfont/iconfont.css

@@ -1,17 +1,11 @@
-
-
-
-
-
-
 @font-face {
   font-family: 'iconfont';  /* project id 2394829 */
-  src: url('https://at.alicdn.com/t/font_2394829_yxeekujatog.eot');
-  src: url('https://at.alicdn.com/t/font_2394829_yxeekujatog.eot?#iefix') format('embedded-opentype'),
-  url('https://at.alicdn.com/t/font_2394829_yxeekujatog.woff2') format('woff2'),
-  url('https://at.alicdn.com/t/font_2394829_yxeekujatog.woff') format('woff'),
-  url('https://at.alicdn.com/t/font_2394829_yxeekujatog.ttf') format('truetype'),
-  url('https://at.alicdn.com/t/font_2394829_yxeekujatog.svg#iconfont') format('svg');
+  src: url('https://at.alicdn.com/t/font_2394829_cpwu6e12c4.eot');
+  src: url('https://at.alicdn.com/t/font_2394829_cpwu6e12c4.eot?#iefix') format('embedded-opentype'),
+  url('https://at.alicdn.com/t/font_2394829_cpwu6e12c4.woff2') format('woff2'),
+  url('https://at.alicdn.com/t/font_2394829_cpwu6e12c4.woff') format('woff'),
+  url('https://at.alicdn.com/t/font_2394829_cpwu6e12c4.ttf') format('truetype'),
+  url('https://at.alicdn.com/t/font_2394829_cpwu6e12c4.svg#iconfont') format('svg');
 }
 
 .iconfont {
@@ -22,6 +16,42 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-xiajiantou_huaban:before {
+  content: "\e63d";
+}
+
+.icon-saoyisao:before {
+  content: "\e607";
+}
+
+.icon-dianhua1:before {
+  content: "\e61d";
+}
+
+.icon-daohang:before {
+  content: "\e612";
+}
+
+.icon-youjiantou:before {
+  content: "\e629";
+}
+
+.icon-zhuye:before {
+  content: "\e64e";
+}
+
+.icon-shezhi:before {
+  content: "\e611";
+}
+
+.icon-xiaoxi:before {
+  content: "\e606";
+}
+
+.icon-circulation-full:before {
+  content: "\e858";
+}
+
 .icon-yanzheng:before {
   content: "\e86a";
 }