|
|
@@ -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;
|
|
|
}
|
|
|
}
|
|
|
|