设备信息、异常信息

components/bobo-router/index.js

@@ -31,7 +31,7 @@ uniCrazyRouter['on' + 'Error']((to, from) => {
 	
 })
 
-//import Router from './bobo-router'
+import Router from './bobo-router'
 import jphelp from '@/apis/utils/mixin.js'
 
 //Vue.use(Router)

main.js

@@ -20,7 +20,7 @@ Vue.prototype.jphelp = mixin
  import Vconsole from 'vconsole'
 //import uView from "uview-ui";
 import uView from '@/uni_modules/uview-ui'
-// import router from '@/components/bobo-router'
+import router from '@/components/bobo-router'
 
 Vue.use(uView);
 

pages.json

@@ -70,6 +70,20 @@
 			{
 				"navigationBarTitleText" : ""
 			}
+		},
+		{
+			"path" : "pages/deviceTab/dataLock",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
+		},
+		{
+			"path" : "pages/userTab/dataUser",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
 		}
 
 

pages/index/index.vue

@@ -100,8 +100,10 @@
 						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
 					</view>
 					<view class="text">
-						<view>用户停留时长分群特征</view>
-
+						<view>时空矩阵图</view>
+						
+						<view class="tag">2025年1月1日<u-icon name="arrow-down"></u-icon></view>
+						
 					</view>
 
 				</view>
@@ -120,6 +122,54 @@
 
 					</jpContent>
 				</view>
+			</view>
+			
+			<view class="statistics ">
+				<view class="title">
+					<view class="icon">
+						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
+					</view>
+					<view class="text">
+						<view>车位异常记录</view>
+						
+						<view class="check-all" >查看全部<u-icon name="arrow-right"></u-icon></view>
+						
+					</view>
+			
+				</view>
+			
+				<view class="contentBody">
+					<jpContent :status="jpContentMap.body6">
+						<view class="body6main">
+							<view class="line"  v-for="(item,index) in abnormalRecordsList" :key="index">
+								<view class="abnormal-item">
+								<!-- @click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)"
+								 -->
+									<view class="item-title">
+											
+										<view class="name">
+											<span v-if="item.level==1" class="level level1 ">一级</span>
+											<span v-if="item.level==2"  class="level level2">二级</span>
+											
+											{{item.content}}
+										</view>
+										<view class="date" style="display: flex;    justify-content: space-between;margin-top: 4rpx;">
+											<view>{{item.title}}</view>
+											<view>{{item.createTime}}</view>
+											
+										</view>
+									</view>
+								
+								</view>
+								<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
+							</view>
+			
+						</view>
+			
+			
+			
+					</jpContent>
+				</view>
 			</view>
 
 			<view class="statistics ">
@@ -205,6 +255,61 @@
 
 					</jpContent>
 				</view>
+			</view>
+			
+			
+			<view class="statistics ">
+				<view class="title">
+					<view class="icon">
+						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
+					</view>
+					<view class="text">
+						<view>设备列表</view>
+						
+						<view class="check-all"  @click="gotoUrl('/pages/deviceTab/index')"
+						>查看全部<u-icon name="arrow-right"></u-icon></view>
+						
+					</view>
+			
+				</view>
+			
+				<view class="contentBody">
+					<jpContent :status="jpContentMap.body7">
+						<view class="body7main">
+							<view class="line"  v-for="(item,index) in equipmentList"
+							 @click="gotoUrl('/pages/deviceTab/dataLock?id='+item.id)"
+							 :key="index">
+								<view class="item" >
+								<!-- 
+								 -->
+									<view class="item-title">
+										A01
+
+									</view>
+									<view class="item-tags">
+										<view class="tag tag1">
+											公共车位
+
+										</view>
+										<view class="tag">
+											在线
+
+										</view>
+										<view class="tag">
+											空闲
+										</view>
+									</view>
+								
+								</view>
+								<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
+							</view>
+			
+						</view>
+			
+			
+			
+					</jpContent>
+				</view>
 			</view>
 
 		</view>
@@ -228,9 +333,22 @@
 		data() {
 			return {
 				isReady: false,
-				echartsList: {
-
-				},
+				echartsList: {},
+				equipmentList:[{}],
+				abnormalRecordsList:[
+					{
+						level:1,
+						content:"1111111",
+						title:"11",
+						createTime:"123:123"
+					},
+					{
+						level:2,
+						content:"1111111",
+						title:"11",
+						createTime:"123:123"
+					}
+				],
 				jpContentMap: {
 					body1: 2,
 					body2: 2,
@@ -278,11 +396,11 @@
 
 				// 数据
 				var data1 = [
-					// A停车场 1-3点有人
+					
 					[0, 0, 1], // 1点
 					[1, 0, 1], // 2点
 					[2, 0, 1], // 3点
-					// A停车场 7-8点有人
+				
 					[6, 0, 1], // 7点
 					[7, 0, 1], // 8点
 
@@ -302,11 +420,27 @@
 				];
 
 				// 颜色映射
-				var colorMap = {
-					0: '#ffffff', // 无人
-					1: '#FFA500', // A停车场
-					2: '#00FF00' // B停车场
-				};
+				var colorMap = [
+					 '#ffffff', 
+					 '#FFA500', 
+					 '#00FF00',
+					 '#F44336', 
+					 '#E91E63' ,
+					 '#9C27B0', 
+					 '#673AB7' ,
+					 '#3F51B5', 
+					 '#2196F3' ,
+					 '#03A9F4', 
+					 '#00BCD4' ,
+					 '#009688', 
+					 '#CDDC39' ,
+					 '#FFEB3B' ,
+					 '#FFC107' ,
+					 '#FF9800' ,
+					 '#FF5722' ,
+					 '#795548' ,
+					 '#607D8B' 
+				];
 
 				var option = {
 					tooltip: {
@@ -316,7 +450,7 @@
 						}
 					},
 					grid: {
-						top: 20,
+						top: 30,
 						left: -10,
 						right: 0,
 						bottom: 0,
@@ -407,7 +541,7 @@
 					}]
 				};
 
-				console.log(option)
+				//console.log(option)
 				myChart.setOption(option);
 				this.echartsList[key] = myChart;
 			},
@@ -1013,5 +1147,115 @@
 			padding-right: 12rpx;
 		}
 
-	}
+	}
+	.body6main{
+		.line{
+			    display: flex;
+			    justify-content: space-between;
+		}
+			.abnormal-item:last-of-type {
+				border-bottom: none !important;
+				padding-bottom: 0;
+			}
+
+			.abnormal-item {
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 16rpx;
+				border-bottom: 1px solid rgba(245, 245, 245, 1);
+
+
+				.item-title {
+					.level{
+						color:#fff;
+						
+						    border-radius: 8rpx;
+						    font-weight: 400;
+						    padding: 4rpx 8rpx;
+						    font-size: 22rpx;
+							margin-right: 2px;
+					}
+					.level1{
+						background: red;
+					}
+					.level2{
+						background-color: rgba(255,123,0,1);
+					}
+
+					color: rgba(51, 51, 51, 1);
+					    width: 100%;
+					.img {
+						width: 32rpx;
+						height: 32rpx;
+						margin-right: 8rpx;
+					}
+
+					.name {
+						color: rgba(51, 51, 51, 1);
+						font-weight: bold;
+						    overflow: hidden;
+						    white-space: nowrap;
+						    text-overflow: ellipsis;
+					}
+
+					.date {
+						color: rgba(119, 119, 119, 1);
+						font-size: 24rpx;
+					}
+				}
+
+				.item-value {
+					text-align: right;
+					display: flex;
+					align-items: center;
+
+					.more {
+						margin-left: 8rpx;
+					}
+
+					.value1 {
+						font-weight: bold;
+						color: rgba(51, 51, 51, 1);
+					}
+
+					.value2 {
+						color: rgba(119, 119, 119, 1);
+						font-size: 24rpx;
+					}
+				}
+			}
+		}
+		
+		.body7main{
+			border-radius: 4px;
+			background-color: rgba(245,245,245,1);
+			padding:32rpx;
+			.line{
+				display: flex;
+				    display: flex;
+				    justify-content: space-between;
+					.item-title{
+						color: rgba(51,51,51,1);
+						font-size: 28rpx;
+
+					}
+					.item-tags{
+						    display: flex;
+						.tag{
+							border-radius: 4px;
+							
+							background-color: rgba(39,177,72,1);
+							color: rgba(255,255,255,1);
+							font-size: 20rpx;
+							padding:2rpx 8rpx;
+							margin-right: 8rpx;
+						}
+						.tag1{
+							background-color: rgba(22,119,255,1);
+						}
+					}
+			}
+		}
 </style>

pages/userTab/dataUser.vue

@@ -0,0 +1,19 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

pages/userTab/index.vue

@@ -4,13 +4,13 @@
 		<view class="main">
 			<view class="search">
 				<view class="searchBox">
-					<u-search shape="square" :animation="true"></u-search>
+					<u-search shape="square" placeholder="搜索姓名/车牌/手机号" :animation="true"></u-search>
 					<u-button type="primary"  size="mini">搜素</u-button>
 				</view>
 			</view>
 
 			<view class="list">
-				<view class="line"   @click="gotoUrl('/pages/deviceTab/deviceList?id=1')" >
+				<view class="line"   @click="gotoUrl('/pages/userTab/dataUser?id=1')" >
 					<view class="body">
 						<view class="imgclass">
 							<image class="img" src="@/assets/img/默认头像.png" mode=""></image>