modify

common/common.scss

@@ -25,6 +25,9 @@ radio,checkbox {
 	  src: url('static/font/FANDOLFANG-REGULAR.OTF');
 	}
 
+.cu-bar .search-form uni-input{
+	padding:0 30rpx
+}
 .searchSelect{
 		position: -webkit-fixed;
 		    position: fixed;
@@ -70,11 +73,13 @@ radio,checkbox {
 /* 九宫格样式 */
 .cu-list.grid>.cu-item uni-text {
 	color: #333;
-	font-size: 30rpx;
+	font-size: 30rpx;
+	margin-top:14rpx
 }
 
 .cu-list.menu-avatar>.cu-item>.cu-avatar {
-	left: 24rpx
+	left: 24rpx;
+	background-color:rgba(0,0,0,0)
 }
 
 .cu-list.menu-avatar>.cu-item .action {
@@ -170,24 +175,9 @@ radio,checkbox {
 	right: 20rpx
 }
 
-.ding{
-	position:fixed;
-	width:100%;
-	top: var(--window-top);
-		// position: sticky;
-			/* #ifdef H5 */
-			// top: 44px;
-			/* #endif */
-			/* #ifndef H5 */
-			// top: 0;
-			/* #endif */
-			z-index: 999;
-			flex: 1;
-			flex-direction: column;
-			overflow: hidden;
-			background-color: #ffffff;
+
 	
-	}
+	
 /* 已处理未处理列表 */
 .processList .cu-list.menu-avatar .cu-item {
 	
@@ -323,4 +313,41 @@ radio,checkbox {
 	}
 	
 	
-	
+	// 离线设备
+	
+	.ding{
+		position:fixed;
+		width:100%;
+		top: var(--window-top);
+			// position: sticky;
+				/* #ifdef H5 */
+				// top: 44px;
+				/* #endif */
+				/* #ifndef H5 */
+				// top: 0;
+				/* #endif */
+				z-index: 999;
+				flex: 1;
+				flex-direction: column;
+				overflow: hidden;
+				background-color: #ffffff;
+		
+		}
+		
+	.cu-bar{
+		min-height:0rpx;
+		
+	}
+	.cu-bar .search-form {
+		margin:0 24rpx;
+		margin-top:26rpx;
+		
+	}
+	
+	select{
+		outline:none;
+		border:none;
+		width:90%;
+		padding-left:24rpx;
+		color:#999
+	}

data/json.js

@@ -1,73 +1,161 @@
-// 本地模拟json数据
+// 本地模拟json数据
+// 首页九宫格
 let cuIconList = [{
-	imgUrl: '../../static/square1.png',
-	badge: 120,
-	name: '综合报警',
-	redirectUrl: '/pages/siteList/siteList?type=1'
-}, {
-	imgUrl: '../../static/square2.png',
-	badge: 100,
-	name: '设备管理',
-	redirectUrl: '/pages/siteList/siteList?type=2'
-}, 
-{
-	imgUrl: '../../static/square-wb.png',
-	badge: 0,
-	name: '消防督查单',
-	redirectUrl: ''
-},
- {
-	imgUrl: '../../static/square-xj.png',
-	badge: 0,
-	badge: 0,
-	name: '巡检',
-	redirectUrl: ''
-},  
-{
-	imgUrl: '../../static/square-bx.png',
-	badge: 0,
-	name: '报修',
-	redirectUrl: ''
-},{
-	imgUrl: '../../static/square-wb.png',
-	badge: 0,
-	name: '维保',
-	redirectUrl: ''
-},
-{
-	imgUrl: '../../static/square-bz.png',
-	badge: 0,
-	badge: 0,
-	name: '视频监测',
-	redirectUrl: ''
-},
-{
-	imgUrl: '../../static/square-bz.png',
-	badge: 0,
-	badge: 0,
-	name: '风险保障',
-	redirectUrl: ''
-},{
-	imgUrl: '../../static/square-rl.png',
-	badge: 0,
-	name: '人脸识别',
-	redirectUrl: ''
-},
-{
-	imgUrl: '../../static/square-rl.png',
-	badge: 0,
-	name: '设备注册',
-	redirectUrl: ''
-},
-{
-	imgUrl: '../../static/square-rl.png',
-	badge: 0,
-	name: '用户管理',
-	redirectUrl: ''
-}];
-
-
+		imgUrl: '../../static/square1.png',
+		badge: 120,
+		name: '综合报警',
+		redirectUrl: '/pages/siteList/siteList?type=1'
+	}, {
+		imgUrl: '../../static/square2.png',
+		badge: 100,
+		name: '设备管理',
+		redirectUrl: '/pages/siteList/siteList?type=2'
+	},
+	{
+		imgUrl: '../../static/square-xf.png',
+		badge: 0,
+		name: '消防督查单',
+		redirectUrl: ''
+	},
+	{
+		imgUrl: '../../static/square-xj.png',
+		badge: 0,
+		badge: 0,
+		name: '巡检',
+		redirectUrl: ''
+	},
+	{
+		imgUrl: '../../static/square-bx.png',
+		badge: 0,
+		name: '报修',
+		redirectUrl: ''
+	}, {
+		imgUrl: '../../static/square-wb.png',
+		badge: 0,
+		name: '维保',
+		redirectUrl: ''
+	},
+	{
+		imgUrl: '../../static/square-sp.png',
+		badge: 0,
+		badge: 0,
+		name: '视频监测',
+		redirectUrl: ''
+	},
+	{
+		imgUrl: '../../static/square-bz.png',
+		badge: 0,
+		badge: 0,
+		name: '风险保障',
+		redirectUrl: ''
+	}, {
+		imgUrl: '../../static/square-rl.png',
+		badge: 0,
+		name: '人脸识别',
+		redirectUrl: ''
+	},
+	{
+		imgUrl: '../../static/square-sb.png',
+		badge: 0,
+		name: '设备注册',
+		redirectUrl: ''
+	},
+	{
+		imgUrl: '../../static/square-yh.png',
+		badge: 0,
+		name: '用户管理',
+		redirectUrl: ''
+	}
+];
+
+//综合报警九宫格
+let alarmingSquareList = [{
+		imgUrl: '../../static/alarming-zj.png',
+		badge: 100,
+		name: '报警主机',
+		
+	}, {
+		imgUrl: '../../static/alarming-water.png',
+		badge: 0,
+		name: '水系统',
+	},
+	{
+		imgUrl: '../../static/alarming-ck.png',
+		badge: 0,
+		name: '测控终端',
+	},
+	{
+		imgUrl: '../../static/alarming-dq.png',
+		badge: 0,
+		name: '电气火灾',
+	},
+	{
+		imgUrl: '../../static/alarming-sp.png',
+		badge: 0,
+		name: '视频告警',
+	},
+	{
+		imgUrl: '../../static/alarming-dt.png',
+		badge: 0,
+		name: '电梯报警',
+	},
+	{
+		imgUrl: '../../static/alarming-mc.png',
+		badge: 0,
+		name: '门磁',
+	},
+	{
+		imgUrl: '../../static/alarming-kr.png',
+		badge: 0,
+		name: '可燃气体',
+	},
+	{
+		imgUrl: '../../static/alarming-jg.png',
+		badge: 0,
+		name: '井盖监测',
+	},
+	{
+		imgUrl: '../../static/alarming-xf.png',
+		badge: 0,
+		name: '消防栓监测',
+	}
+];
 
+let deviceOffLineData = [{
+					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'
+				},{
+					title:'测试用传装置',
+					subTitle:'三楼茶水间',
+					status:'未处理',
+					time:'2020-01-08 15:15:12'
+				},
+				{
+					title:'测试用传装置',
+					subTitle:'三楼茶水间',
+					status:'未处理',
+					time:'2020-01-08 15:15:12'
+				}]
+
+
+
 // 本地模拟json数据
 let siteListData = [{
 		"id": 1,
@@ -239,5 +327,7 @@ module.exports = {
 	siteListData: siteListData,
 	cuIconList: cuIconList,
 	unprocessList: unprocessList,
-	processedList: processedList
+	processedList: processedList,
+	alarmingSquareList:alarmingSquareList,
+	deviceOffLineData:deviceOffLineData
 }

pages.json

@@ -1,19 +1,7 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 
-
-		{
-			"path": "pages/login/login",
-			"style": {
-				"navigationBarTitleText": "登录"
-			}
-		},
-		{
-			"path": "pages/alarmingList/alarmingList"
-
-		},
-
-		{
+{
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "虹泾总部园",
@@ -45,6 +33,24 @@
 
 			}
 		},
+		{
+			"path": "pages/login/login",
+			"style": {
+				"navigationBarTitleText": "登录"
+			}
+		},{
+		    "path" : "pages/deviceOffLine/deviceOffLine",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "离线设备",
+		        "enablePullDownRefresh": false
+		    } 
+		},
+		
+		
+		
+
+		
 		{
 			"path": "pages/siteList/siteList",
 			"style": {
@@ -87,12 +93,12 @@
 
 
 
-		// {
-		// 	"path": "pages/info/info",
-		// 	"style": {
-		// 		"navigationBarTitleText": "消息"
-		// 	}
-		// },
+		{
+			"path": "pages/info/info",
+			"style": {
+				"navigationBarTitleText": "消息"
+			}
+		},
 		{
 			"path": "pages/analyse/analyse",
 			"style": {
@@ -326,7 +332,8 @@
 			}
 
 		}
-	],
+	    
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",

pages/alarmingList/alarmingList.vue

@@ -1,111 +1,91 @@
-<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">
-					<image src="../../static/square-dl.png" style="width:100rpx;height:100rpx"></image>
-					<view class="cu-tag badge" v-if="powerMonitoringCount!=0">{{powerMonitoringCount>99?'99+':powerMonitoringCount}}
-					</view>
-					<text>电力监测</text>
-				</view>
-				<view class="cu-item justify-center align-center" @tap="goProcessList2">
-					<image src="../../static/square-alarm.png" style="width:100rpx;height:100rpx"></image>  
-					<view class="cu-tag badge" v-if="videoMonitoringCount!=0">{{videoMonitoringCount>99?'99+':videoMonitoringCount}}
-					</view>
-					<text>视频告警</text>
-				</view>
-				
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	
-	// import square from '../../components/square/square.vue';
-	
-	export default {
-		// components: {
-		// 	square
-		// },
-		
-		data() {
-			return {
-				powerMonitoringCount:'',
-				videoMonitoringCount:'',
-				companyCode:'',
-				count2:'',
-				// 宫格列表数据
-				cuIconList: [{
-					imgUrl:'../../static/square-dl.png',
-					badge: this.powerMonitoringCount,
-					name: '电力监测',
-					redirectUrl:'/pages/processList/processList?type=1'
-				}, {
-					imgUrl:'../../static/square-alarm.png',
-					badge: 20,
-					name: '视频告警',
-					redirectUrl:'/pages/processList/processList?type=2'
-				}],
-				
-			}
-		},
-		onLoad(option) {
-			uni.setNavigationBarTitle({
-				title: '站点类型'
-			});
-			console.log(option.companyCode)
-			this.getSiteType(option.companyCode)
-
-		},
-		methods: {
-			
-			async getSiteType(ming) {
-				const res= await this.$myRequest({
-					url:'IntegratedAlarm/getSiteType',
-					data:{
-						"companyCode": ming,
-						
-					}
-				})
-				console.log(res.data)
-				// this.cuIconList=res.data.data   videoMonitoringCount
-				this.powerMonitoringCount= res.data.data[0].powerMonitoringCount
-				this.videoMonitoringCount= res.data.data[0].videoMonitoringCount
-				this.companyCode=res.data.companyCode;
-				
-			},
-			
-			// 页面跳转
-			goProcessList() {
-				if(this.powerMonitoringCount){
-					uni.navigateTo({
-						url: '/pages/processList/processList?type=1&companyCode='+this.companyCode+'',
-						success: res => {},
-						fail: () => {},
-						complete: () => {}
-					});
-				}
-				
-			},
-			goProcessList2() {
-				if(this.videoMonitoringCount){
-					uni.navigateTo({
-						url: '/pages/processList/processList?type=2&companyCode='+this.companyCode+'',
-						success: res => {},
-						fail: () => {},
-						complete: () => {}
-					});
-				}
-				
-			},
-			
-		}
-	}
-</script>
-
-<style>
-
+<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"  v-for="(item,index) in alarmingSquareList"
+				 :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>{{item.name}}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import json from '../../data/json.js';
+
+
+	export default {
+
+		data() {
+			return {
+				powerMonitoringCount: '',
+				videoMonitoringCount: '',
+				companyCode: '',
+				count2: '',
+				// 宫格列表数据
+				alarmingSquareList: json.alarmingSquareList
+
+			}
+		},
+		onLoad(option) {
+
+			// console.log(option.companyCode)
+			// this.getSiteType(option.companyCode)
+
+		},
+		methods: {
+
+			async getSiteType(ming) {
+				const res = await this.$myRequest({
+					url: 'IntegratedAlarm/getSiteType',
+					data: {
+						"companyCode": ming,
+
+					}
+				})
+				console.log(res.data)
+				// this.cuIconList=res.data.data   videoMonitoringCount
+				this.powerMonitoringCount = res.data.data[0].powerMonitoringCount
+				this.videoMonitoringCount = res.data.data[0].videoMonitoringCount
+				this.companyCode = res.data.companyCode;
+
+			},
+
+			// 页面跳转
+			goProcessList() {
+				if (this.powerMonitoringCount) {
+					uni.navigateTo({
+						url: '/pages/processList/processList?type=1&companyCode=' + this.companyCode + '',
+						success: res => {},
+						fail: () => {},
+						complete: () => {}
+					});
+				}
+
+			},
+			goProcessList2() {
+				if (this.videoMonitoringCount) {
+					uni.navigateTo({
+						url: '/pages/processList/processList?type=2&companyCode=' + this.companyCode + '',
+						success: res => {},
+						fail: () => {},
+						complete: () => {}
+					});
+				}
+
+			},
+
+		}
+	}
+</script>
+
+<style>
+
 </style>

pages/deviceAdd/deviceAdd.vue

@@ -36,7 +36,7 @@
 					<option value="-3">楼层B3</option>
 					<option value="-2">楼层B2</option>
 					<option value="-1">楼层B1</option>
-					<option value="item" v-for="item in 60">楼层{{item}}</option>
+					<option value="item" v-for="item in 60" :key="index">楼层{{item}}</option>
 				</select>
 			</view>
 			<view class="form-item">
@@ -92,7 +92,7 @@
 					<option value="-3">楼层B3</option>
 					<option value="-2">楼层B2</option>
 					<option value="-1">楼层B1</option>
-					<option :value=index+1 v-for="(item,index) in 60">楼层{{item}}</option>
+					<option :value=index+1 v-for="(item,index) in 60" ::key="index">楼层{{item}}</option>
 				</select>
 			</view>
 			<view class="form-item">

pages/deviceOffLine/deviceOffLine.vue

@@ -0,0 +1,207 @@
+<template>
+	<view class="site-wrapper" ref="contentWrapper">
+
+		<!-- 筛选框start -->
+		<view class="ding">
+			<view class="cu-bar search bg-gray filter-section" style="with:50%;">
+				<view class="search-form round bg-white" >
+					<select name="" id="" placeholder="">
+						<option value="">请选择设备类型</option>
+						<option value="">类型1</option>
+						<option value="">类型2</option>
+					</select>
+				</view>
+				<view class="search-form round bg-white">
+					<input  type="text"
+					 placeholder="选输入设备点位" confirm-type="search"></input>
+				</view>
+			</view>
+			
+			<view class="cu-bar search bg-gray filter-section">
+				<view class="search-form round bg-white" style="margin-bottom:26rpx">
+					<input class="" @focus="InputFocus" v-model="siteName" @blur="InputBlur" :adjust-position="false" type="text"
+					 placeholder="选择传输方式" confirm-type="search"></input>
+				</view>
+				<view class="action">
+					<button class="cu-btn bg-blue round" @click="searchData()">查询</button>
+				</view>
+			</view>
+		</view>
+		<!-- 筛选框end -->
+
+
+		<!-- 设备列表start -->
+		<block class="">
+			<view class="processList" style="margin-top:206rpx">
+				<view class="cu-list menu-avatar ">
+					<view class="cu-item" v-for="(item,index) in deviceOffLineData" :key="index"  @tap="goUnprocessDetail">
+						<view class="cu-avatar lg" style="background-image:url(../../static/device-icon.png);"></view>
+						<view class="content">
+							<view class="pro-title">
+								<view class="cut">{{item.title}}</view>
+							</view>
+							<view class="pro-des  ">
+								<view class="text-cut">
+									{{item.subTitle}}
+								</view>
+							</view>
+							<view class="pro-date ">{{item.time}}</view>
+						</view>
+						
+					</view>
+				</view>
+			</view>
+		</block>
+		<!-- 设备列表end -->
+
+
+	</view>
+
+</template>
+
+<script>
+	import json from '../../data/json.js';
+
+	export default {
+		data() {
+			return {
+				
+				deviceOffLineData:json.deviceOffLineData,
+				siteListRes: 0,
+				siteName: '',
+				type: '0',
+				siteListData: [],
+				modalName: null,
+				listTouchStart: 0,
+				listTouchDirection: null,
+				CustomBar: this.CustomBar,
+			};
+		},
+
+
+		onPullDownRefresh() {
+			console.log('refresh');
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+		computed: {
+			newSiteListData() {
+				return this.siteListData.map(item => {
+					this.$set(item, "isShow", false)
+					return item
+				})
+			}
+
+		},
+
+
+		mounted() {
+			document.addEventListener('click', (e) => {
+				if (e.target.className != 'showDetail') {
+					this.siteListData.forEach(item => {
+						item.isShow = false
+					})
+				}
+			})
+		},
+		onLoad() {
+			this.getSiteList()
+		},
+
+		methods: {
+			searchData() {
+				this.getSiteList({
+					"siteName": this.siteName
+				})
+			},
+
+
+			async getSiteList(ming) {
+				const res = await this.$myRequest({
+					url: 'OperationMonitoring/getSiteList',
+					showLoading: true,
+					data: ming
+				})
+				this.siteListRes = 1;
+				console.log(res.data.data)
+				this.siteListData = res.data.data
+			},
+
+
+			// 隐藏显示
+			showDetail(e) {
+				// 存储点击那一项的状态
+				const nowStatu = 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
+			},
+
+
+			goDeviceType(item) {
+				if (item.count) {
+					uni.navigateTo({
+						url: '/pages/deviceType/deviceType?companyCode=' + item.companyCode,
+						success: res => {},
+						fail: () => {},
+						complete: () => {}
+					});
+				}
+
+			},
+			goSiteDetail(item) {
+				uni.navigateTo({
+					url: '/pages/siteDetail/siteDetail?id=' + item.id + '',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			},
+		}
+
+	}
+</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: 45%;
+		z-index: 3000000;
+		font-size: 28rpx;
+
+	}
+
+	/* *:not(input) { */
+
+	* {
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-khtml-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+	}
+	input {
+		user-select: initial !important;
+	}
+
+
+	/* uni-page-head .uni-page-head-bd{
+		 user-select: none!important;
+	} */
+</style>

pages/index/components/chart3/chart3.vue

@@ -50,7 +50,7 @@
 								padding: [0, 0, 8, 5],
 								textStyle: {
 									color: '#333',
-									fontSize:'16'
+									fontSize:'15'
 
 								}
 							},

pages/index/index.vue

@@ -28,7 +28,7 @@
 
 					<chart2 :bindData="staticData"></chart2>
 				</view>
-				<view v-if="Inv == 2" class="chart3-box">
+				<view v-if="Inv == 2" class="chart3-box" @tap="goDeviceList()">
 					<ul class="chart3-icon">
 						<li>
 							<image src="../../static/chart3-1.png" style="width:64rpx;height:64rpx"></image>
@@ -282,7 +282,7 @@
 				let url = "";
 				switch (index) {
 					case 0:
-						url = "/pages/siteListAlarming/siteListAlarming"
+						url = "/pages/alarmingList/alarmingList"
 						break;
 					case 1:
 						url = "/pages/siteList/siteList"
@@ -322,6 +322,17 @@
 			changeTab(Inv) {
 				that.navIdx = Inv;
 
+			},
+			
+			
+			// 页面跳转
+			goDeviceList() {
+				uni.navigateTo({
+					url: '/pages/deviceOffLine/deviceOffLine',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
 			},
 
 		}
@@ -376,7 +387,7 @@
 		border: 1px solid #E8F1FF;
 		padding: 20rpx;
 		color: #666666;
-		font-size: 28rpx;
+		font-size: 30rpx;
 
 	}
 

util/api.js

@@ -1,5 +1,5 @@
-// const BASE_URL = 'https://iot.usky.cn/USKYOF/USKYOF.php/Home/'
-const BASE_URL='https://qhome.usky.cn/USKYOF/USKYOF.php/Home/'
+const BASE_URL = 'https://iot.usky.cn/USKYOF/USKYOF.php/Home/'
+// const BASE_URL='https://qhome.usky.cn/USKYOF/USKYOF.php/Home/'
 // 同时发送异步代码的次数，防止一次点击中有多次请求，用于处理
 let ajaxTimes = 0;