Explorar o código

fix:首页更改

yf_elsa.cui hai 7 horas
pai
achega
7d729ee67a
Modificáronse 3 ficheiros con 103 adicións e 54 borrados
  1. 15 0
      main.js
  2. 74 52
      pages/equipList/index.vue
  3. 14 2
      pages/index/index.vue

+ 15 - 0
main.js

@@ -50,6 +50,21 @@ Vue.filter('timeFormat', function (time,fmt = 'yyyy-MM-dd hh:mm:ss') {
   return fmt;
 });
 
+Vue.filter('yfEllipsis', (content, length = 10) => {
+  if (!content) return '';
+  if (content.length > length) {
+    return content.slice(0, length) + '...';
+  }
+  return content;
+});
+Vue.prototype.yfEllipsis = function (content, length = 10) {
+  if (!content) return '';
+  if (content.length > length) {
+    return content.slice(0, length) + '...';
+  }
+  return content;
+};
+
 Vue.prototype.formatTime = function (thistime, fmt = 'yyyy-MM-dd hh:mm:ss') {
   let $this = new Date(thistime);
   let o = {

+ 74 - 52
pages/equipList/index.vue

@@ -43,26 +43,23 @@
 					@scrolltolower="lower" @scroll="scroll">
 					<view class="list_item" v-for="(item, index) in eqlistdata" :key="index" @click="historys(item)">
 						<view class="list_item_top">
-							<p class="p1">
-								<view>{{
-                  item.device_name == '' ? '--' : item.device_name
-                }}</view>
-							</p>
-							<p v-if="![11, 19, 20].includes(type_id)" :class="[item.is_online ? 'p2' : 'p_out']">
-								{{ item.is_online ? '在线' : '离线' }}
+							<p class="p1"> <span class="title">{{ (item.device_name || '--' )| yfEllipsis(7)}}</span><span class="sub-title">{{ item.only_for_show || item.device_id }}</span></p>
+							
+							<p v-if="![11, 19, 20].includes(type_id)"  class="online-status">
+								<!-- {{ item.is_online ? '在线' : '离线' }} -->
+								<image v-if="item.is_online" :src="$imageURL+'/bigdata_app/newImg/home/online.png'" mode=""></image>
+								<image v-else :src="$imageURL+'/bigdata_app/newImg/home/outline.png'" mode=""></image>
 							</p>
 						</view>
 						<view class="list_item_text">
-							<p>设备ID:{{ item.only_for_show || item.device_id }}</p>
-							<p>
-								适配用户:{{ item.real_name == '' ? '无' : item.real_name }}
-							</p>
-
+							
 							<p v-if="type_id == 40 || type_id == 42">
-								最新上报时间:{{ item.uptime }}
+								<span class="label">上报时间</span> {{ item.uptime }}
+							</p>
+							<p v-else><span class="label">上报时间</span>{{ item.uptime | timeFormat() }}</p>
+							<p>
+								<span class="label">设备位置</span>{{ (item.address|| '无') | yfEllipsis(16)}}
 							</p>
-							<p v-else>最新上报时间:{{ item.uptime | timeFormat() }}</p>
-			
 						</view>
 					</view>
 				</scroll-view>
@@ -825,6 +822,7 @@
 		.tab-item.active {
 			color: #303133;
 			font-weight: 700;
+			
 		}
 		.tab-item.active::after {
 		  content: '';
@@ -832,12 +830,14 @@
 		  bottom: 0;
 		  left: 50%;
 		  transform: translateX(-50%);
-		  width: 20px; /* 比文字略宽 */
+		  width: 18px; /* 比文字略宽 */
 		  height: 18px;
 		  border: 3px solid #0BBC58;
 		  border-radius: 50%;
-		  // background-color: #4CAF50; /* 绿色 */
-		  // border-radius: 2px 2px 8px 8px; /* 关键:上小下大的圆角 */
+			border-color: transparent; /* 隐藏其他部分 */
+
+		    border-bottom-color: #0BBC58; /* 组合成45度角 */
+		    // transform: rotate(0deg); /* 调整角度 */
 		}
 	}
 
@@ -872,62 +872,84 @@
 			border-radius: 16rpx;
 
 			.list_item_top {
-				display: flex;
-				justify-content: space-between;
+		
 
 				.p1 {
 					width: 86%;
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
+
 					height: 60rpx;
 					line-height: 60rpx;
 					font-size: 28rpx;
 					overflow: hidden;
 
-					image {
-						width: 40rpx;
-						height: 40rpx;
-						vertical-align: text-top;
-						margin-right: 20rpx;
-					}
+				
 
-					view {
-						width: calc(100% - 40rpx);
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
+					.title{
+						 color: #333333;
+						 
+						 font-size: 28rpx;
+						
+						 font-weight: 700;
+						margin-right: 8rpx;
+					}
+					
+					.sub-title{
+						 color: #666666;
+						 
+						 font-size: 28rpx;
+						
+						 font-weight: 400;
+						
 					}
 				}
 
-				.p2 {
-					height: 60rpx;
-					line-height: 60rpx;
-					font-size: 28rpx;
-					color: #42b983;
-				}
-
-				.p_out {
-					height: 60rpx;
-					line-height: 60rpx;
-					font-size: 28rpx;
-					color: red;
+				
+			}
+			.online-status{
+				font-size: 28rpx;
+				position: absolute;
+				top:0rpx;
+				text-align: center;
+				right: 0rpx;
+				width: 76px;
+				height: 28px;
+				// line-height: 28px;
+				// border-radius: 0px 0px 0px 26px;
+				
+				// border: 1px solid #ffffff;
+				image{
+					width: 152rpx;
+					height: 56rpx;
 				}
+	
 			}
-
+			// .p2 {
+					
+			// 	color: #0BBC58;
+			// 	background: #0bbc581a;
+			// }
+			
+			// .p_out {
+					
+			// 	color: #FB4E52;
+			// 	background: #fb4e521a;
+			// }
 			.list_item_text {
 				margin-top: 20rpx;
-
+				
 				p {
 					font-size: 24rpx;
-					color: #636363;
+					color: #303133;
 					margin-top: 10rpx;
 					word-break: break-all;
 				}
+				
 
-				p:first-child {
-					font-size: 28rpx;
-					font-weight: 700;
+				.label{
+					 color: #999999;
+					 text-align: right;
+					margin-right: 32rpx;
+					 font-size: 24rpx;
 				}
 			}
 

+ 14 - 2
pages/index/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="home">
-		<view class="welcom">欢迎登录</view>
+		<view class="welcom">{{ hello }} 欢迎登录</view>
 		<view class="weather-bg">
 			<view class="weather-box">
 
@@ -27,7 +27,7 @@
 				</view>
 				<view class="weather">
 					<view class="weatext">
-						<view>湿度<span class="text-span">{{weatherinfo.air_level}}</span></view>
+						<view>湿度<span class="text-span">{{weatherinfo.ah | ahFilter}}</span></view>
 						<view class="text-value">{{weatherinfo.ah}}%</view>
 					</view>
 					<view class="weatext">
@@ -220,6 +220,18 @@
 		//     imageUrl: 'http://www.hnyfwlw.com:8006/data/home_logo/log1.jpg' // 分享图片,可选
 		//   }
 		// },
+		filters:{
+			ahFilter(value){
+	
+				if(value>70){
+					return"湿润"
+				}else if(value<30){
+					return'干燥'
+				}else{
+					return'正常'
+				}
+			}
+		},
 		data() {
 			return {
 				indicatorDots: true,