设备注册等弹框页面

common/common.scss

@@ -451,17 +451,6 @@ radio,checkbox {
 	}
 	
 	
-	// 导出页面
-	.cu-dialog{
-		width:70%
-	}
-	.cu-modal .cu-dialog>.cu-bar:first-child .action{
-		min-height:50rpx;
-		min-width:auto;
-	}
-	.cu-dialog{
-		border-radius:20rpx
-	}
 	
 	// 设备类型
 	.cu-list.menu-avatar .deviceTypeItem.cu-item{
@@ -781,4 +770,34 @@ radio,checkbox {
 	}
 	
 	
+	// 导出页面样式start
+	.cu-dialog{
+		width:505rpx
+	}
+	.cu-modal .cu-dialog>.cu-bar:first-child .action{
+		min-height:50rpx;
+		min-width:auto;
+	}
+	.cu-dialog{
+		border-radius:20rpx
+	}
+	.export-modal{
+		.cu-bar .action:first-child{
+			margin-left:70rpx;
+		}
+		.cu-bar.operate .action:last-child{
+			margin-right:70rpx;
+			color:#fff;
+			background:#4074E7;
+		}
+		.cu-bar.operate .action{
+			width:158rpx;
+			border: 1px solid #bfbfbf;
+			border-radius: 29rpx;
+			line-height:56rpx;
+			font-size:26rpx;
+		}
+	}
+    // 导出页面样式end
+	
 	

components/export.vue

@@ -0,0 +1,20 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"export",
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages.json

@@ -370,28 +370,10 @@
 			"path": "pages/deviceManage/deviceAdd/deviceAdd",
 			"style": {
 				"navigationBarTitleText": "新增",
-				"enablePullDownRefresh": false,
-				"app-plus": {
-					"titleNView": {
-						"buttons": [{
-								"text": "\ue607",
-								"fontSize": "18px",
-								// "redDot": true,
-								"float": "right",
-								"fontSrc": "/static/iconfont/iconfont.ttf",
-								"width": "auto"
-				
-							}
-						]
-					}
-				}
+				"enablePullDownRefresh": false
 			}
-
 		}
 
-	    
-        
-       
         ,{
             "path" : "pages/inspectList/processList/processList",
             "style" :                                                                                    
@@ -696,6 +678,24 @@
             }
             
         }
+        ,{
+            "path" : "pages/deviceManage/deviceEdit/deviceEdit",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "修改",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/deviceManage/component/validCode/validCode",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	
 	

pages/deviceManage/component/validCode/validCode.vue

@@ -0,0 +1,88 @@
+<template>
+	<view class="flex" style="width:70%;margin:30px auto 0">
+		<view class="flex-sub">
+			<input type="text" class=" verifyInput">
+		</view>
+		<view class="ValidCode disabled-select flex-sub" :style="`width:${width}; height:${height}`" @click="refreshCode">
+		  <text v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</text>
+		</view>
+	</view>
+ 
+</template>
+
+<script>
+export default {
+  name: 'validCode',
+  props: {
+    width: {
+      type: String,
+      default: '100px'
+    },
+    height: {
+      type: String,
+      default: '40px'
+    },
+    length: {
+      type: Number,
+      default: 4
+    }
+  },
+  data () {
+    return {
+      codeList: []
+    }
+  },
+  mounted () {
+    this.createdCode()
+  },
+  methods: {
+    refreshCode () {
+      this.createdCode()
+    },
+    createdCode () {
+      let len = this.length,
+        codeList = [],
+        chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789',
+        charsLen = chars.length
+      // 生成
+      for (let i = 0; i < len; i++) {
+        let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
+        codeList.push({
+          code: chars.charAt(Math.floor(Math.random() * charsLen)),
+          color: `rgb(${rgb})`,
+          fontSize: `1${[Math.floor(Math.random() * 10)]}px`,
+          padding: `${[Math.floor(Math.random() * 10)]}px`,
+          transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
+        })
+      }
+      // 指向
+      this.codeList = codeList
+      // 将当前数据派发出去
+      this.$emit('update:value', codeList.map(item => item.code).join(''))
+    },
+    getStyle (data) {
+      return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .ValidCode{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    span{
+      display: inline-block;
+    }
+  }
+  .verifyInput{
+	  width: 180rpx;
+	  height: 56rpx;
+	  opacity: 1;
+	  background: #ffffff;
+	  border: 1rpx solid #bfbfbf;
+	  border-radius: 5rpx;
+  }
+</style>

pages/deviceManage/deviceEdit/deviceEdit.vue

@@ -0,0 +1,203 @@
+
+<template>
+	<view class="appWrapper padding-top">
+
+		<form action="">
+			<view class="form-item ">
+				<view class="title">
+					<text class="necessary">*</text>
+					设备编号:
+				</view>
+				<input name="input" v-model="formMess.deviceNo"></input>
+			</view>
+			<view class="form-item">
+				<view class="title"><text class="necessary">*</text>设备名称:</view>
+				<input name="input" v-model="formMess.deviceName"></input>
+			</view>
+			<view class="form-item">
+				<view class="title"><text class="necessary">*</text>单元地址:</view>
+				<input name="input" v-model="formMess.place"></input>
+			</view>
+			<view class="form-item">
+				<view class="title"><text class="necessary">*</text>所属楼层:</view>
+				<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" v-model="formMess.card"></input>
+			</view>
+			<view class="form-item">
+				<view class="title"><text class="necessary">*</text>所属单位:</view>
+				<select name="" id="">
+					<option value="">楼层一</option>
+					<option value="">楼层一</option>
+					<option value="">楼层一</option>
+				</select>
+			</view>
+			<view class="form-item">
+				<view class="title"><text class="necessary">*</text>设备类型:</view>
+				<select name="" id="">
+					<option value="">类型一</option>
+					<option value="">类型一</option>
+					<option value="">类型一</option>
+				</select>
+			</view>
+			<view class="form-item">
+				<view class="title"><text class="necessary">*</text>传输方式:</view>
+				<select name="" id="">
+					<option value="">方式一</option>
+					<option value="">方式一</option>
+					<option value="">方式一</option>
+				</select>
+			</view>
+			<view class="form-item margin-top">
+				<view class="title">
+					<text class="necessary">*</text>
+					是否顶楼
+				</view>
+				<radio-group name="gender">
+					<label class="margin-right">
+						<radio value="是"/><text>是</text>
+					</label>
+					<label>
+						<radio value="否"  checked /><text>否</text>
+					</label>
+				</radio-group>
+			</view>
+		
+
+			<view class="btn-area submitBottomBtn padding-lr-sm">
+				<button class="bg-blue round  margin-top">提 交 </button>
+			</view>
+		</form>
+		
+		
+	</view>
+</template>
+
+<script>
+	// var graceChecker = require("../../common/graceChecker.js");
+	// import add from '../../common/select.js';
+	export default {
+		
+		data() {
+			return {
+				index: -1,
+				picker: ['楼层一', '楼层二', '楼层三'],
+				type: '0',
+
+
+				formMess: {
+					"deviceNo":'dsds',
+					"deviceName":'sds',
+					"userName": "sss",
+					"place": "sss",
+					"card":'dd',
+					"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
+
+
+			}
+		},
+		onLoad: function(option) {
+			
+
+
+		},
+		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">
+
+
+	input,
+	select,
+	option {
+		line-height: 70rpx;
+		padding: 0 20rpx;
+		height: 70rpx;
+		border: 1px solid #EDEDED;
+		// width:500rpx!important;
+		background-color: #fff;
+		box-sizing: border-box;
+		appearance: none;
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		color: #999;
+	}
+
+
+
+	
+	/* 站点多选下拉样式end */
+</style>
+

pages/deviceManage/deviceManage.vue

@@ -2,9 +2,8 @@
 	<view class="deviceRegistWrapper" ref="contentWrapper">
 
 		<!-- 筛选框start -->
-			
 		<view>
-			<view style="height:103px"></view>
+			<view style="height:206rpx"></view>
 			<view class="ding">
 				<view class="cu-bar search bg-gray filter-section" style="with:50%;">
 					<view class="search-form round bg-white">
@@ -28,11 +27,8 @@
 						<button class="cu-btn bg-blue round" @click="searchData()">查询</button>
 					</view>
 				</view>
-			
-			
 			</view>
 		</view>
-	
 		<!-- 筛选框end -->
 
 
@@ -42,15 +38,11 @@
 				<view class="cu-list menu-avatar ">
 					<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
 						v-for="(item,index) in newDeviceManage" :key="index" :data-target="'move-box-' + index">
-
 						<checkbox-group class="block" @change="CheckboxChange">
 							<view class="cu-form-group margin-top">
-								<checkbox class='blue' :class="checkbox[0].checked?'checked':''"
-									:checked="checkbox[0].checked?true:false" value="A"></checkbox>
+								<checkbox class='blue' @click="selectedProduct(item)" :class="{'check':item.checked}" value="A"></checkbox>
 							</view>
 						</checkbox-group>
-
-
 						<view class="cu-avatar round lg" style="background-image:url(../../static/device-icon.png)">
 						</view>
 						<view class="content" @longpress="showDetail(item)">
@@ -65,8 +57,8 @@
 							<view class="pro-date ">{{item.time}}</view>
 							
 							<view class="showDetail"  v-if="item.isShow">
-								<view>修改设备</view>
-								<view>删除设备</view>
+								<view @tap="goDeviceEdit()">修改设备</view>
+								<view @tap="deleteItem" data-target="DialogModal2">删除设备</view>
 							</view>
 						</view>
 						<view class="nav-right num">
@@ -85,40 +77,114 @@
 
 
 		<view class="share grid col-3 ">
-			<view class="checkAll">
-				<checkbox-group class="block" @change="CheckboxChange" style="display:inline-block">
-					<view class="cu-form-group margin-top">
-						<checkbox class='blue' :class="checkbox[0].checked?'checked':''"
-							:checked="checkbox[0].checked?true:false" value="A"></checkbox>
-					</view>
-				</checkbox-group>全选
-			</view>
 			<view class="share-item  text-center">
 				<view><text class="icon iconfont margin-xs" style="color:#19A402">&#xe66d;</text></view>
 				<view @tap="goDeviceAdd()">新增</view>
 			</view>
 			<view class="share-item  text-center">
 				<view><text class="icon iconfont margin-xs" style="color:#FF0303">&#xe66c;</text></view>
-				<view>删除</view>
+				<view @tap="deleteItem" data-target="DialogModal2">删除</view>
 			</view>
-			<view class="share-item  text-center">
+			<view class="share-item  text-center" >
 				<view><text class="icon iconfont margin-xs" style="color:#FF642E">&#xe66e;</text></view>
-				<view>导出</view>
+				<view @tap="showModal" data-target="DialogModal">导出</view>
 
 			</view>
+			<view class="checkAll">
+				<checkbox-group class="block" @change="CheckboxChange" style="display:inline-block">
+					<view class="cu-form-group margin-top">
+						<checkbox class='blue' :class="checkbox[0].checked?'checked':''"
+							:checked="checkbox[0].checked?true:false" value="A"></checkbox>
+					</view>
+				</checkbox-group> 
+				<text class="margin-left-xs">全选</text>
+			</view>
 		</view>
+		
+		
+		<!-- 导出弹框 -->
+		<view class="cu-modal export-modal" :class="modalName=='DialogModal'?'show':''">
+			<view class="cu-dialog">
+				<view class="cu-bar bg-white justify-end">
+					<view class="action" @tap="hideModal">
+						<text class="cuIcon-close"></text>
+					</view>
+				</view>
+				<view class="padding-sm bg-white">
+					<image src="../../static/ok.png" style="width:100rpx;height:100rpx"></image>
+					<view style="margin:20rpx 0">已导出文件，是否打开？</view>
+				</view>
+				<view class="cu-bar operate bg-white" style="min-height: 100rpx;">
+					<view class="action margin-0   " @tap="hideModal">
+						另存为</view>
+					<view class="action margin-0  solid-left text-blue" @tap="hideModal">打开</view>
+				</view>
+			</view>
+		</view>
+		<!-- 导出弹框 end -->
+		
+		
+		<!-- 删除弹框 -->
+		<view class="cu-modal export-modal" :class="modalName=='DialogModal2'?'show':''">
+			<view class="cu-dialog">
+				<view class="cu-bar bg-white justify-end">
+					<view class="action" @tap="hideModal">
+						<text class="cuIcon-close"></text>
+					</view>
+				</view>
+				<view class="padding-sm bg-white">
+					<image src="../../static/chart3-2.png" style="width:100rpx;height:100rpx"></image>
+					<view style="margin:20rpx 0">确定删除该设备吗？</view>
+				</view>
+				<view class="cu-bar operate bg-white" style="min-height: 100rpx;">
+					<view class="action margin-0   " @tap="hideModal">
+						取消</view>
+					<view class="action margin-0  solid-left text-blue"   @tap="openConfirmModal" data-target="DialogModal3">确定</view>
+				</view>
+			</view>
+		</view>
+		<!-- 删除弹框 end -->
+		
+		
+		<!-- 再次确认删除弹框 -->
+		<view class="cu-modal export-modal" :class="modalName=='DialogModal3'?'show':''">
+			<view class="cu-dialog">
+				<view class="cu-bar bg-white justify-end">
+					<view class="action" @tap="hideModal">
+						<text class="cuIcon-close"></text>
+					</view>
+				</view>
+				<view class="padding-sm bg-white">
+					
+					<view style="margin:20rpx 0">请输入图片中的验证码</view>
+					<valid-code :value.sync="validCode"></valid-code>
 
-
+				</view>
+				<view class="cu-bar operate bg-white" style="min-height: 100rpx;">
+					<view class="action margin-0   " @tap="hideModal">
+						取消</view>
+					<view class="action margin-0  solid-left text-blue" @tap="hideModal">确定</view>
+				</view>
+			</view>
+		</view>
+		<!-- 再次确认删除弹框 end -->
+		
+		
 	</view>
 
 </template>
 
 <script>
 	import json from '../../data/json.js';
+	import validCode from './component/validCode/validCode';
 
 	export default {
+		components: {
+			validCode
+		},
 		data() {
 			return {
+				validCode:'',
 
 				checkbox: [{
 					value: 'A',
@@ -131,6 +197,7 @@
 				type: '0',
 				siteListData: [],
 				modalName: null,
+				// modalName2: null,
 				listTouchStart: 0,
 				listTouchDirection: null,
 				CustomBar: this.CustomBar,
@@ -166,18 +233,48 @@
 		},
 
 		methods: {
-		
+			selectedProduct:function(item){
+				console.log(item)
+						if(typeof item.checked=='undefined'){
+							this.$set(item,'checked',true);
+						}else{
+							item.checked = !item.checked;
+						}
+					},
+
 			// 页面跳转
 			goDeviceAdd() {
-				alert(1)
-				
-				// uni.navigateTo({
-				// 	url: '/pages/deviceDetail/deviceDetail',
-				// });
 				uni.navigateTo({
 					url: '/pages/deviceManage/deviceAdd/deviceAdd',
 				});
 			},
+			goDeviceEdit() {
+				uni.navigateTo({
+					url: '/pages/deviceManage/deviceEdit/deviceEdit',
+				});
+			},
+			
+			
+			//导出弹框
+			showModal(e) {
+				this.modalName = e.currentTarget.dataset.target
+			},
+			
+			//关闭弹框
+			hideModal(e) {
+				this.modalName = null
+			},
+			
+			//删除弹出框操作
+			deleteItem(e){
+				this.modalName = e.currentTarget.dataset.target;
+				
+			},
+			//再次确认弹框
+			openConfirmModal(e){
+				this.modalName = e.currentTarget.dataset.target;
+				
+			},
 
 			CheckboxChange(e) {
 				var items = this.checkbox,

pages/export/export.vue

@@ -1,5 +1,6 @@
 <template>
-	<view class="processWrapper ">
+	<view class="processWrapper ">
+		<view style="height:98rpx"></view>
 		<view class="ding">
 			<calendar></calendar>
 		</view>
@@ -38,8 +39,7 @@
 		
 		
 		<!-- 弹框 -->
-		
-		<view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
+		<view class="cu-modal export-modal" :class="modalName=='DialogModal'?'show':''">
 			<view class="cu-dialog">
 				<view class="cu-bar bg-white justify-end">
 					<view class="action" @tap="hideModal">
@@ -50,10 +50,10 @@
 					<image src="../../static/ok.png" style="width:100rpx;height:100rpx"></image>
 					<view style="margin:20rpx 0">已导出文件，是否打开？</view>
 				</view>
-				<view class="cu-bar bg-white" style="min-height: 100rpx;">
-					<view class="action margin-0 flex-sub  " @tap="hideModal">
+				<view class="cu-bar bg-white  operate" style="min-height: 100rpx;">
+					<view class="action margin-0  " @tap="hideModal">
 						另存为</view>
-					<view class="action margin-0 flex-sub  solid-left text-blue" @tap="hideModal">打开</view>
+					<view class="action margin-0  solid-left text-blue" @tap="hideModal">打开</view>
 				</view>
 			</view>
 		</view>
@@ -131,13 +131,9 @@
 			
 
 			tabSelect(e) {
-
 				console.log(e.currentTarget);
 				this.TabCur = e.currentTarget.dataset.id;
 				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
-
-
-
 			},
 
 			

pages/inspectList/processList/processList.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="processWrapper ">
-
+		<view style="height:98rpx"></view>
 		<view class="ding">
 			<scroll-view scroll-x class="bg-white nav text-center">
 				<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"

pages/processList/processList.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="processWrapper ">
-
+		<view style="height:98rpx"></view>
 		<view class="ding">
 			<scroll-view scroll-x class="bg-white nav text-center">
 				<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"