综合管理已处理未处理列表排版 运行监测设备管理 设备类型排版 组件封装

common/common.css

@@ -1,4 +1,7 @@
-/* common */
+/* common */
+body{
+	font-size:32rpx;
+}
 
 /* 九宫格样式 */
 .cu-list.grid>.cu-item uni-text {
@@ -51,7 +54,7 @@
 /* 筛选框 */
 	.filter-section {
 		position: fixed;
-		top: 88rpx;
+		/* top: 88rpx; */
 		width: 100%;
 		z-index: 9
 	}
@@ -64,9 +67,9 @@
 	/* 站点列表 */
 	.site-items {
 		position: fixed;
-		top: 180rpx;
+		top: 100rpx;
 		width: 100%;
-		height: calc(100% - 290rpx);;
+		height: calc(100% - 100rpx);;
 		overflow: scroll
 	}
 	.site-items .site-tit {
@@ -111,3 +114,37 @@
 	height: calc(100% - 100rpx);
 	    overflow-y: scroll;
 }
+
+
+/* 已处理未处理详情页样式 */
+.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;
+		
+	}
+	.checkMore{
+		color:#4074E7
+	}
+	.info-content view text:first-child {
+		width: 160rpx;
+		display: inline-block
+	}
+	
+	

components/square/square.vue

@@ -0,0 +1,41 @@
+<template>
+	<view>
+		<view class="section2 section  bg-white margin-top-sm margin-bottom-sm">
+			<view class="cu-list grid col-3 no-border">
+				<view class="cu-item justify-center align-center" @tap="goSiteList"  v-for="(item,index) in cuIconList" :key="index">
+					<image :src="`${item.imgUrl}`" style="width:100rpx;height:100rpx"></image>
+					<view class="cu-tag badge" v-if="item.badge!=0">
+						<block class="cu-tag badge" v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
+					</view>
+					<text>{{item.name}}</text>
+				</view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		props:[ 'cuIconList'] ,  //接收外界传过来的数据
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			goSiteList() {
+				uni.navigateTo({
+					url: '/pages/siteList/siteList',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages.json

@@ -32,10 +32,33 @@
 				"navigationBarTitleText": "处理列表"
 			}
 		},
+		{
+			"path": "pages/unprocessDetail/unprocessDetail",
+			"style": {
+				"navigationBarTitleText": "未处理详情页"
+			}
+		},
+		{
+			"path": "pages/processedDetail/processedDetail",
+			"style": {
+				"navigationBarTitleText": "处理详情页"
+			}
+		},
 		
+		{
+			"path": "pages/deviceType/deviceType",
+			"style": {
+				"navigationBarTitleText": "设备类型"
+			}
+		},
+		{
+			"path": "pages/deviceManage/deviceManage",
+			"style": {
+				"navigationBarTitleText": "设备管理"
+			}
+		},
 		
-		
-		
+	
 		
 		
 		{
@@ -89,7 +112,7 @@
             "path" : "pages/siteList/siteList",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "",
+                "navigationBarTitleText": "站点列表",
                 "enablePullDownRefresh": false
             }
             
@@ -98,7 +121,7 @@
             "path" : "pages/alarmingList/alarmingList",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "",
+                "navigationBarTitleText": "综合报警",
                 "enablePullDownRefresh": false
             }
             
@@ -106,12 +129,57 @@
         ,{
             "path" : "pages/processList/processList",
             "style" :                                                                                    
+            {
+                "navigationBarTitleText": "处理列表",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "components/square/square",
+            "style" :                                                                                    
             {
                 "navigationBarTitleText": "",
                 "enablePullDownRefresh": false
             }
             
         }
+        ,{
+            "path" : "pages/unprocessDetail/unprocessDetail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "未处理",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/processedDetail/processedDetail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "已处理",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/deviceType/deviceType",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "设备类型",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/deviceManage/deviceManage",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "设备管理",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/alarmingList/alarmingList.vue

@@ -1,6 +1,7 @@
 <template>
 	<view>
 		<!-- 宫格列表 -->
+		<!-- <square :cuIconList="cuIconList"></square> -->
 		<view class="section2 section  bg-white margin-top-sm margin-bottom-sm">
 			<view class="cu-list grid col-3 no-border">
 				<view class="cu-item justify-center align-center"  @tap="goProcessList">
@@ -20,19 +21,32 @@
 </template>
 
 <script>
+	// import square from '../../components/square/square.vue';
+	
 	export default {
+		// components: {
+		
+		// 	square
+		// },
 		data() {
 			return {
+				// 宫格列表数据
+				// cuIconList: [{
+				// 	imgUrl:'../../static/square-dl.png',
+				// 	badge: 120,
+				// 	name: '电力检测'
+				// }, {
+				// 	imgUrl:'../../static/square-alarm.png',
+				// 	badge: 0,
+				// 	name: '视频告警'
+				// }],
 				
 			}
 		},
 		onLoad() {
-			
 			uni.setNavigationBarTitle({
 				title: '综合报警'
 			});
-		
-		
 		},
 		methods: {
 			// 页面跳转

pages/deviceManage/deviceManage.vue

@@ -0,0 +1,62 @@
+<template>
+
+	<view class="">
+		<view class="cu-list menu-avatar">
+			<view class="cu-item deviceTypeItem" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in deviceData"
+			 :key="index" :data-target="'move-box-' + index">
+				<view class="cu-avatar round lg" :style="`background-image:url(${item.imgUrl})`"></view>
+				<view class="content" @tap="goDeviceManage">
+					<view class="">{{item.title}}</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>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				deviceData: [{
+						imgUrl: '../../static/jx.png',
+						title: '进线一',
+					}, {
+						imgUrl: '../../static/jx.png',
+						title: '进线二',
+					}
+				],
+				modalName: null,
+			};
+		},
+		methods: {
+			goDeviceManage() {
+				uni.navigateTo({
+					url: '/pages/deviceManage/deviceManage',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			}
+
+
+
+		}
+
+	}
+</script>
+
+<style lang="scss">
+	.cu-list.menu-avatar>.cu-item .content>uni-view:first-child {
+		font-size: 32rpx;
+	}
+
+	.num {
+		font-size: 30rpx;
+		color: #666;
+	}
+</style>

pages/deviceType/deviceType.vue

@@ -0,0 +1,68 @@
+<template>
+
+	<view class="">
+		<view class="cu-list menu-avatar">
+			<view class="cu-item deviceTypeItem" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in deviceData"
+			 :key="index" :data-target="'move-box-' + index">
+				<view class="cu-avatar round lg" :style="`background-image:url(${item.imgUrl})`"></view>
+				<view class="content" @tap="goDeviceManage">
+					<view class="">{{item.title}}</view>
+				</view>
+				<view class="nav-right num">
+					<view class="text-grey">
+						共{{item.num}}个设备
+						<text class="icon iconfont margin-right-xs margin-left-lg">&#xe629;</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				deviceData: [{
+						imgUrl: '../../static/square-video.png',
+						title: '视频',
+						num: 6
+					}, {
+						imgUrl: '../../static/square-dl.png',
+						title: '电力监测',
+						num: 11
+					}
+
+				],
+
+				modalName: null,
+
+			};
+		},
+		methods: {
+			goDeviceManage() {
+				uni.navigateTo({
+					url: '/pages/deviceManage/deviceManage',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			}
+
+
+
+		}
+
+	}
+</script>
+
+<style lang="scss">
+	.cu-list.menu-avatar>.cu-item .content>uni-view:first-child {
+		font-size: 32rpx;
+	}
+
+	.num {
+		font-size: 30rpx;
+		color: #666;
+	}
+</style>

pages/index/index.vue

@@ -31,65 +31,74 @@
 			</view>
 		</view>
 
-
-		<!-- 宫格列表 -->
-		<view class="section2 section  bg-white margin-top-sm margin-bottom-sm">
+		<!-- 宫格列表 -->
+		<square :cuIconList="cuIconList"></square>
+		<!-- <view class="section2 section  bg-white margin-top-sm margin-bottom-sm">
 			<view class="cu-list grid col-3 no-border">
-				<!-- <navigator url="/pages/siteList/siteList">
-				</navigator> -->
-				<view class="cu-item justify-center align-center" @tap="goSiteList">
-					<image src="../../static/square1.png" style="width:100rpx;height:100rpx"></image>
-					<view class="cu-tag badge">99+
+				<view class="cu-item justify-center align-center" @tap="goSiteList"  v-for="(item,index) in cuIconList" :key="index">
+					<image :src="`${item.imgUrl}`" style="width:100rpx;height:100rpx"></image>
+					<view class="cu-tag badge" v-if="item.badge!=0">
+						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
 					</view>
-					<text>综合报警</text>
-				</view>
-				<view class="cu-item justify-center align-center">
-					<image src="../../static/square2.png" style="width:100rpx;height:100rpx"></image>
-					<text>运行监测</text>
-				</view>
-				<view class="cu-item justify-center align-center">
-					<image src="../../static/square-wb.png" style="width:100rpx;height:100rpx"></image>
-					<text>维保</text>
-				</view>
-				<view class="cu-item justify-center align-center">
-					<image src="../../static/square-bx.png" style="width:100rpx;height:100rpx"></image>
-					<text>报修</text>
-				</view>
-				<view class="cu-item justify-center align-center">
-					<image src="../../static/square-rl.png" style="width:100rpx;height:100rpx"></image>
-					<text>人脸识别</text>
-				</view>
-				<view class="cu-item justify-center align-center">
-					<image src="../../static/square-xj.png" style="width:100rpx;height:100rpx"></image>
-					<text>巡检</text>
-				</view>
-				<view class="cu-item justify-center align-center">
-					<image src="../../static/square-sp.png" style="width:100rpx;height:100rpx"></image>
-					<text>视频监测</text>
-				</view>
-				<view class="cu-item justify-center align-center">
-					<image src="../../static/square-bz.png" style="width:100rpx;height:100rpx"></image>
-					<text>风险保障</text>
+					<text>{{item.name}}</text>
 				</view>
 			</view>
-		</view>
+		</view> -->
 	</view>
 </template>
 
 <script>
 	import chart from './components/chart/chart.vue';
 	import chart2 from './components/chart2/chart2.vue';
-	import chart3 from './components/chart3/chart3.vue';
+	import chart3 from './components/chart3/chart3.vue';
+	import square from '../../components/square/square.vue';
 
 	export default {
 		components: {
 			chart,
 			chart2,
-			chart3
+			chart3,
+			square
 		},
 		data() {
-			return {
-
+			return {
+				
+				// 宫格列表数据
+				cuIconList: [{
+					imgUrl:'../../static/square1.png',
+					badge: 120,
+					name: '综合报警'
+				}, {
+					imgUrl:'../../static/square2.png',
+					badge: 0,
+					name: '运行监测'
+				}, {
+					imgUrl:'../../static/square-wb.png',
+					badge: 0,
+					name: '维保'
+				}, {
+					imgUrl:'../../static/square-bx.png',
+					badge: 22,
+					name: '报修'
+				}, {
+					imgUrl:'../../static/square-rl.png',
+					badge: 0,
+					name: '人脸识别'
+				}, {
+					imgUrl:'../../static/square-xj.png',
+					badge: 0,
+					badge: 0,
+					name: '巡检'
+				}, {
+					imgUrl:'../../static/square-sp.png',
+					badge: 0,
+					name: '视频检测'
+				}, {
+					imgUrl:'../../static/square-bz.png',
+					badge: 0,
+					badge: 0,
+					name: '风险保障'
+				}],
 				Inv: 0,
 
 
@@ -103,19 +112,6 @@
 				that.navIdx = Inv;
 
 			},
-			goSiteList() {
-				uni.navigateTo({
-					url: '/pages/siteList/siteList',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			}
-
-
-
-
-
 
 		}
 	}

pages/login/login.vue

@@ -22,7 +22,6 @@
 					<navigator open-type="switchTab" url="/pages/index/index" hover-class="navigator-hover">
 						<button class="submit">提 交 </button>
 					</navigator>
-
 				</view>
 			</view>
 		</form>

pages/processList/processList.vue

@@ -2,28 +2,31 @@
 	<view class="processWrapper ">
 		<scroll-view scroll-x class="bg-white nav text-center fixed" :style="[{top:CustomBar + 'px'}]">
 			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
-			 :data-id="index">
+			 :data-id="index">
+				<view class="cu-tag badge" >
+					<block class="cu-tag badge" v-if="item.badge!=1">99</block>
+				</view>
 				{{tabNav[index]}}
 			</view>
 		</scroll-view>
 		<block v-if="TabCur==0">
 			<view class="processList">
 				<view class="cu-list menu-avatar ">
-					<view class="cu-item" v-for="(item,index) in 12" :key="index">
+					<view class="cu-item" v-for="(item,index) in unporcessList" :key="index"  @tap="goUnprocessDetail">
 						<view class="cu-avatar lg" style="background-image:url(../../static/process-icon.png);"></view>
 						<view class="content">
 							<view class="pro-title">
-								<view class="cut">[2020]HP第DZ4104号人工督查单</view>
+								<view class="cut">{{item.title}}</view>
 							</view>
 							<view class="pro-des  ">
 								<view class="text-cut">
-									事件未处理测试
+									{{item.subTitle}}
 								</view>
 							</view>
-							<view class="pro-date ">2020-01-08 15:15:12</view>
+							<view class="pro-date ">{{item.time}}</view>
 						</view>
 						<view class="action">
-							<view class="unprocess">未处理</view>
+							<view class="unProcess">{{item.status}}</view>
 						</view>
 					</view>
 				</view>
@@ -32,21 +35,21 @@
 		<block v-if="TabCur==1">
 			<view class="processList">
 				<view class="cu-list menu-avatar ">
-					<view class="cu-item" v-for="(item,index) in 12" :key="index">
-						<view class="cu-avatar lg" style="background-image:url(../../static/process-icon.png);"></view>
+					<view class="cu-item" v-for="(item,index) in processedList" :key="index" @tap="goProcessedDetail">
+						<view class="cu-avatar lg" style="background-image:url(../../static/processed-icon.png);"></view>
 						<view class="content">
 							<view class="pro-title">
-								<view class="cut">[2020]HP第DZ4104号人工督查单</view>
+								<view class="cut">{{item.title}}</view>
 							</view>
 							<view class="pro-des  ">
 								<view class="text-cut">
-									事件未处理测试
+									{{item.subTitle}}
 								</view>
 							</view>
-							<view class="pro-date ">2020-01-08 15:15:12</view>
+							<view class="pro-date ">{{item.time}}</view>
 						</view>
 						<view class="action">
-							<view class="processed">已处理</view>
+							<view class="processed">{{item.status}}</view>
 						</view>
 					</view>
 				</view>
@@ -59,23 +62,125 @@
 <script>
 	export default {
 		data() {
-			return {
-
-
+			return {
+				unporcessList:[{
+					title:'母线停电',
+					subTitle:'动作',
+					status:'未处理',
+					time:'2020-01-08 15:15:12'
+				},{
+					title:'母线停电2',
+					subTitle:'复归',
+					status:'未处理',
+					time:'2020-01-08 15:15:12'
+				},{
+					title:'母线停电3',
+					subTitle:'动作',
+					status:'未处理',
+					time:'2020-01-08 15:15:12'
+				},{
+					title:'母线停电4',
+					subTitle:'复归',
+					status:'未处理',
+					time:'2020-01-08 15:15:12'
+				},{
+					title:'母线停电5',
+					subTitle:'复归',
+					status:'未处理',
+					time:'2020-01-08 15:15:12'
+				},{
+					title:'母线停电6',
+					subTitle:'复归',
+					status:'未处理',
+					time:'2020-01-08 15:15:12'
+				},
+				{
+					title:'母线停电',
+					subTitle:'复归',
+					status:'未处理',
+					time:'2020-01-08 15:15:12'
+				},
+				{
+					title:'母线停电',
+					subTitle:'事件未处理测试',
+					status:'未处理',
+					time:'2020-01-08 15:15:12'
+				},
+				{
+					title:'母线停电',
+					subTitle:'事件未处理测试',
+					status:'未处理',
+					time:'2020-01-08 15:15:12'
+				},
+				{
+					title:'母线停电',
+					subTitle:'事件未处理测试',
+					status:'未处理',
+					time:'2020-01-08 15:15:12'
+				}],
+				processedList:[{
+					title:'母线停电',
+					subTitle:'事件已处理测试',
+					status:'已处理',
+					time:'2020-01-08 15:15:12'
+				},{
+					title:'母线停电2',
+					subTitle:'事件已处理测试',
+					status:'已处理',
+					time:'2020-01-08 15:15:12'
+				},{
+					title:'母线停电3',
+					subTitle:'事件已处理测试',
+					status:'已处理',
+					time:'2020-01-08 15:15:12'
+				},{
+					title:'母线停电4',
+					subTitle:'事件已处理测试',
+					status:'已处理',
+					time:'2020-01-08 15:15:12'
+				},{
+					title:'母线停电5',
+					subTitle:'事件已处理测试',
+					status:'已处理',
+					time:'2020-01-08 15:15:12'
+				},{
+					title:'母线停电6',
+					subTitle:'事件已处理测试',
+					status:'已处理',
+					time:'2020-01-08 15:15:12'
+				},
+				{
+					title:'母线停电',
+					subTitle:'事件已处理测试',
+					status:'已处理',
+					time:'2020-01-08 15:15:12'
+				},
+				{
+					title:'母线停电',
+					subTitle:'事件已处理测试',
+					status:'已处理',
+					time:'2020-01-08 15:15:12'
+				},
+				{
+					title:'母线停电',
+					subTitle:'事件已处理测试',
+					status:'已处理',
+					time:'2020-01-08 15:15:12'
+				},
+				{
+					title:'母线停电',
+					subTitle:'事件已处理测试',
+					status:'已处理',
+					time:'2020-01-08 15:15:12'
+				}],
+
+				
 				modalName: null,
 				listTouchStart: 0,
 				listTouchDirection: null,
-
-
-
-
 				CustomBar: this.CustomBar,
 				TabCur: 0,
-				avatar: ['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
-					'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
-					'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
-					'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
-				],
+				
 				tabNav: ['未处理', '已处理']
 			};
 		},
@@ -83,11 +188,45 @@
 			tabSelect(e) {
 				this.TabCur = e.currentTarget.dataset.id;
 				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
+			},
+			
+			// 页面跳转
+			goUnprocessDetail() {
+				uni.navigateTo({
+					url: '/pages/unprocessDetail/unprocessDetail',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			},
+			goProcessedDetail(){
+				uni.navigateTo({
+					url: '/pages/processedDetail/processedDetail',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+				
 			}
 		}
 	}
 </script>
 
-<style>
+<style lang="scss">
+	.nav .cu-item.cur{
+		position:relative;
+		border-bottom: 8rpx solid;
+	}
+	.cu-tag.badge{
+		top: 14rpx;
+		    right: 96rpx;
+	}
+	.nav .cu-item{
+		width:50%;
+		margin:0;
+		.text-blue, .line-blue, .lines-blue{
+			color:#4274E7
+		}
+	}
 
 </style>

pages/processedDetail/processedDetail.vue

@@ -0,0 +1,142 @@
+<template>
+	<view>
+		<view class="timeBox flex justify-between align-center padding-lr-sm">
+			<view class="time">2021-01-18 15:16:45</view>
+			<button class="cu-btn radius bg-green sm">已处理</button>
+		</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>DA00012784</text>
+				</view>
+				<view>
+					<text>站点地址：</text>
+					<text>沪太路8786弄155号</text>
+				</view>
+				<view>
+					<text>联系人：</text>
+					<text>韩正义</text>
+				</view>
+				<view>
+					<text>联系方式：</text>
+					<text>15122423833</text>
+				</view>
+				<view>
+					<text>运行数据：</text>
+					<text class="checkMore">点击查看</text>
+				</view>
+				<view>
+					<text>视频：</text>
+					<text class="checkMore">点击查看</text>
+				</view>
+			</view>
+		</view>
+		<!-- 基本信息end -->
+
+		<!-- 处理信息start -->
+		<view class="processStatus">
+			<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>13262908415</text>
+				</view>
+				<view>
+					<text>处理时间：</text>
+					<text>2021-01-27 09:41:12</text>
+				</view>
+				<view>
+					<text>处理内容：</text>
+					<text>测试</text>
+				</view>
+
+			</view>
+
+
+		</view>
+		<!-- 处理状态end -->
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				radio: 'A',
+				radio: 'B',
+				modalName: null,
+
+			}
+		},
+		methods: {
+			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,7 +1,7 @@
 <template>
 	<view class="site-wrapper">
 		<!-- 筛选框start -->
-		<view class="cu-bar search bg-gray filter-section">
+		<view class="cu-bar search bg-gray filter-section" :style="[{top:CustomBar + 'px'}]">
 			<view class="search-form round bg-white">
 				<text class="cuIcon-search"></text>
 				<input class="" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="请输入站点名称"
@@ -14,12 +14,13 @@
 		<!-- 筛选框end -->
 		
 		<!-- 站点列表start -->
-		<view class="site-items">
+		<view class="site-items" :style="[{top:CustomBar + 'px'}]">
 			<view class="cu-list menu-avatar">
 				<view class="cu-item"  :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in 12" :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" @tap="goAlarmingList">
+					<!-- <view class="content" @tap="goDeviceType"> -->
 						<view class="text-grey site-tit">测试站点一</view>
 					</view>
 					<view class="nav-right">
@@ -35,7 +36,7 @@
 			</view>
 
 		</view>
-		<!-- 站点列表end -->
+		<!-- 站点列表end
 		
 		<!-- 新增按钮start -->
 		<view class="plus">
@@ -54,6 +55,7 @@
 				modalName: null,
 				listTouchStart: 0,
 				listTouchDirection: null,
+				CustomBar: this.CustomBar,
 			};
 		},
 		methods: {
@@ -67,6 +69,21 @@
 					complete: () => {}
 				});
 			},
+			goDeviceType() {
+				uni.navigateTo({
+					url: '/pages/deviceType/deviceType',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			},
+			
+			InputFocus(e) {
+				this.InputBottom = e.detail.height
+			},
+			InputBlur(e) {
+				this.InputBottom = 0
+			},
 		
 			// ListTouch触摸开始
 			ListTouchStart(e) {

pages/unprocessDetail/unprocessDetail.vue

@@ -0,0 +1,162 @@
+<template>
+	<view>
+		<view class="timeBox flex justify-between align-center padding-lr-sm">
+			<view class="time">2021-01-18 15:16:45</view>
+			<button class="cu-btn radius bg-red sm">未处理</button>
+		</view>
+
+		<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>DA00012784</text>
+				</view>
+				<view>
+					<text>站点地址：</text>
+					<text>沪太路8786弄155号</text>
+				</view>
+				<view>
+					<text>联系人：</text>
+					<text>韩正义</text>
+				</view>
+				<view>
+					<text>联系方式：</text>
+					<text>15122423833</text>
+				</view>
+				<view>
+					<text>运行数据：</text>
+					<text class="checkMore">点击查看</text>
+				</view>
+				<view>
+					<text>视频：</text>
+					<text class="checkMore">点击查看</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 处理状态start -->
+		<view class="processStatus">
+			<view class="info-tit margin-left-xs">
+				<text class="cuIcon-titles margin-right-xs"></text>
+				处理状态
+			</view>
+			<view class="padding-lr padding-bottom-lg">
+				<form action="">
+					<radio-group class="block" @change="RadioChange">
+						<view class=" flex align-center ">
+							<radio class="blue mr-sm margin-right-xs" :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false"
+							 value="A"></radio>
+							<view class="title">单个处理</view>
+							<radio class="blue margin-left-lg margin-right-xs" :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false"
+							 value="B"></radio>
+							<view class="title ">批量处理</view>
+						</view>
+					</radio-group>
+
+					<view class="cu-form-group margin-top">
+						<!-- <textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="备注信息,最多可输入50个字..."></textarea>-->
+						<textarea class="JTxtArea lg" placeholder="备注信息,最多可输入50个字..." :maxlength="50" :data-maxnum="reason.length+'/50'"
+						 auto-height v-model="reason"></textarea>
+					</view>
+
+					<view class="btn-area">
+						<button class="bg-orange round missReport margin-top">误 报 </button>
+						<button class="bg-blue round  missReport margin-top ">非 误 报 </button>
+					</view>
+
+				</form>
+
+
+
+			</view>
+		</view>
+		<!-- 处理状态end -->
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				radio: 'A',
+				radio: 'B',
+				modalName: null,
+				reason: ''
+
+			}
+		},
+		methods: {
+			RadioChange(e) {
+				this.radio = e.detail.value
+			},
+			textareaAInput(e) {
+				this.textareaAValue = e.detail.value
+			},
+			// textarea
+			inputReason(e) {
+				this.reason = e.detail.value;
+			}
+
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	/* // 处理内容 */
+	.cu-form-group {
+		background: #f5f5f5;
+
+	}
+
+	.processStatus {
+		radio {
+			transform: scale(0.77)
+		}
+
+		textarea {
+			background: #F5F5F5;
+			color: #999999;
+		}
+
+	}
+	// textarea
+	.JTxtArea {
+		position: relative;
+
+		&.sm {
+			min-height: 60rpx;
+		}
+
+		&.lg {
+			min-height: 100rpx;
+		}
+		&:after {
+			content: attr(data-maxnum);
+			position: absolute;
+			right:10rpx;
+			bottom: 0px;
+		}
+	}
+</style>

static/iconfont/iconfont.css

@@ -1,14 +1,16 @@
 
 
 
+
+
 @font-face {
   font-family: 'iconfont';  /* project id 2394829 */
-  src: url('https://at.alicdn.com/t/font_2394829_wmtagzgaokm.eot');
-  src: url('https://at.alicdn.com/t/font_2394829_wmtagzgaokm.eot?#iefix') format('embedded-opentype'),
-  url('https://at.alicdn.com/t/font_2394829_wmtagzgaokm.woff2') format('woff2'),
-  url('https://at.alicdn.com/t/font_2394829_wmtagzgaokm.woff') format('woff'),
-  url('https://at.alicdn.com/t/font_2394829_wmtagzgaokm.ttf') format('truetype'),
-  url('https://at.alicdn.com/t/font_2394829_wmtagzgaokm.svg#iconfont') format('svg');
+  src: url('https://at.alicdn.com/t/font_2394829_c89vlstyj6b.eot');
+  src: url('https://at.alicdn.com/t/font_2394829_c89vlstyj6b.eot?#iefix') format('embedded-opentype'),
+  url('https://at.alicdn.com/t/font_2394829_c89vlstyj6b.woff2') format('woff2'),
+  url('https://at.alicdn.com/t/font_2394829_c89vlstyj6b.woff') format('woff'),
+  url('https://at.alicdn.com/t/font_2394829_c89vlstyj6b.ttf') format('truetype'),
+  url('https://at.alicdn.com/t/font_2394829_c89vlstyj6b.svg#iconfont') format('svg');
 }
 
 .iconfont {

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

@@ -1,14 +1,16 @@
 
 
 
+
+
 @font-face {
   font-family: 'iconfont';  /* project id 2394829 */
-  src: url('https://at.alicdn.com/t/font_2394829_wmtagzgaokm.eot');
-  src: url('https://at.alicdn.com/t/font_2394829_wmtagzgaokm.eot?#iefix') format('embedded-opentype'),
-  url('https://at.alicdn.com/t/font_2394829_wmtagzgaokm.woff2') format('woff2'),
-  url('https://at.alicdn.com/t/font_2394829_wmtagzgaokm.woff') format('woff'),
-  url('https://at.alicdn.com/t/font_2394829_wmtagzgaokm.ttf') format('truetype'),
-  url('https://at.alicdn.com/t/font_2394829_wmtagzgaokm.svg#iconfont') format('svg');
+  src: url('https://at.alicdn.com/t/font_2394829_c89vlstyj6b.eot');
+  src: url('https://at.alicdn.com/t/font_2394829_c89vlstyj6b.eot?#iefix') format('embedded-opentype'),
+  url('https://at.alicdn.com/t/font_2394829_c89vlstyj6b.woff2') format('woff2'),
+  url('https://at.alicdn.com/t/font_2394829_c89vlstyj6b.woff') format('woff'),
+  url('https://at.alicdn.com/t/font_2394829_c89vlstyj6b.ttf') format('truetype'),
+  url('https://at.alicdn.com/t/font_2394829_c89vlstyj6b.svg#iconfont') format('svg');
 }
 
 .iconfont {