消息日志ui
parent
09c81f575a
commit
a464432585
1
App.vue
1
App.vue
|
|
@ -137,6 +137,7 @@ export default {
|
||||||
}
|
}
|
||||||
// ========== 新增:登出时清空localStorage的订阅列表 ==========
|
// ========== 新增:登出时清空localStorage的订阅列表 ==========
|
||||||
uni.removeStorageSync('mqtt_subscribe_list')
|
uni.removeStorageSync('mqtt_subscribe_list')
|
||||||
|
uni.removeStorageSync('agri_list')
|
||||||
console.log('登出成功,MQTT已断开')
|
console.log('登出成功,MQTT已断开')
|
||||||
},
|
},
|
||||||
// token过期处理逻辑(核心)
|
// token过期处理逻辑(核心)
|
||||||
|
|
|
||||||
|
|
@ -70,24 +70,23 @@
|
||||||
<view v-if="item.numBadge>0 && item.badge" class="item-badge"></view>
|
<view v-if="item.numBadge>0 && item.badge" class="item-badge"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="item-content">
|
<view class="item-content">
|
||||||
<view class="item-title">{{ item.title }}</view>
|
<view class="item-title">
|
||||||
|
<text>{{ item.title }}</text>
|
||||||
|
<text class="item-time">
|
||||||
|
<uni-dateformat v-if="item.createTime" :date="item.createTime" :format="formatTime(item.createTime)"
|
||||||
|
:threshold="[60000, 3600000]"></uni-dateformat>
|
||||||
|
<text v-else>--</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
<view class="item-desc">
|
<view class="item-desc">
|
||||||
<view v-if="item.content">{{ item.content }}</view>
|
<view v-if="item.content">{{ item.content }}</view>
|
||||||
<view v-else>暂无更多{{item.title.substring(0,2)}}消息 ... </view>
|
<view v-else>暂无更多{{item.title.substring(0,2)}}消息 ... </view>
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 右侧时间+角标列 -->
|
|
||||||
<view class="item-right">
|
|
||||||
<view class="item-time">
|
|
||||||
<uni-dateformat v-if="item.createTime" :date="item.createTime" :format="formatTime(item.createTime)"
|
|
||||||
:threshold="[60000, 3600000]"></uni-dateformat>
|
|
||||||
<view v-else>--</view>
|
|
||||||
</view>
|
|
||||||
<view v-if="item.numBadge>0 && !item.badge">
|
<view v-if="item.numBadge>0 && !item.badge">
|
||||||
<uni-badge :text="item.numBadge" type="error" size="mini" />
|
<uni-badge :text="item.numBadge" type="error" size="mini" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
</uni-swipe-action-item>
|
</uni-swipe-action-item>
|
||||||
</uni-swipe-action>
|
</uni-swipe-action>
|
||||||
|
|
||||||
|
|
@ -435,31 +434,41 @@ export default {
|
||||||
.item-content {
|
.item-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0; /* 必须加,防止flex溢出 */
|
min-width: 0; /* 必须加,防止flex溢出 */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
.item-title {
|
.item-title {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 8rpx;
|
margin-bottom: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
text:first-child {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.item-desc {
|
.item-desc {
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #999;
|
color: #999;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
view:first-child {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
view:last-child {
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 右侧时间 + 角标 固定区域 */
|
|
||||||
.item-right {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
flex-shrink: 0; /* 时间不被挤压 */
|
|
||||||
margin-left: 20rpx;
|
|
||||||
.item-time {
|
.item-time {
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #999;
|
color: #999;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
<script>
|
<script>
|
||||||
import {listMessage, updateRead} from "@/api/warn/message";
|
import {listMessage, updateRead} from "@/api/warn/message";
|
||||||
import * as mqttUtil from "@/utils/mqtt";
|
import * as mqttUtil from "@/utils/mqtt";
|
||||||
|
import {formatTime} from "@/utils/agri";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -72,7 +72,6 @@ export default {
|
||||||
this.getList();
|
this.getList();
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
this.updateRead();
|
|
||||||
console.info("消息日志监听")
|
console.info("消息日志监听")
|
||||||
mqttUtil.setOnMessageCallback(this.ackAlarm);
|
mqttUtil.setOnMessageCallback(this.ackAlarm);
|
||||||
},
|
},
|
||||||
|
|
@ -89,7 +88,7 @@ export default {
|
||||||
mqttUtil.removeOnMessageCallback();
|
mqttUtil.removeOnMessageCallback();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
formatTime,
|
||||||
// 判断两个时间是否是同一天同一分钟
|
// 判断两个时间是否是同一天同一分钟
|
||||||
isSameMinute(time1, time2) {
|
isSameMinute(time1, time2) {
|
||||||
const date1 = new Date(time1);
|
const date1 = new Date(time1);
|
||||||
|
|
@ -100,40 +99,7 @@ export default {
|
||||||
date1.getHours() === date2.getHours() &&
|
date1.getHours() === date2.getHours() &&
|
||||||
date1.getMinutes() === date2.getMinutes();
|
date1.getMinutes() === date2.getMinutes();
|
||||||
},
|
},
|
||||||
formatTime(timeStr) {
|
|
||||||
const now = new Date();
|
|
||||||
const target = new Date(timeStr);
|
|
||||||
const diff = now - target;
|
|
||||||
const day = 86400000;
|
|
||||||
const week = 7 * day;
|
|
||||||
|
|
||||||
// 时间
|
|
||||||
const h = String(target.getHours()).padStart(2, '0');
|
|
||||||
const m = String(target.getMinutes()).padStart(2, '0');
|
|
||||||
const time = `${h}:${m}`;
|
|
||||||
|
|
||||||
// 今天
|
|
||||||
if (now.toDateString() === target.toDateString())
|
|
||||||
return `今天 ${time}`;
|
|
||||||
|
|
||||||
// 昨天
|
|
||||||
const yest = new Date(now);
|
|
||||||
yest.setDate(now.getDate() - 1);
|
|
||||||
if (yest.toDateString() === target.toDateString())
|
|
||||||
return `昨天 ${time}`;
|
|
||||||
|
|
||||||
// 7天内
|
|
||||||
if (diff <= week) {
|
|
||||||
const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
|
|
||||||
return `星期${weekMap[target.getDay()]} ${time}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 7天前
|
|
||||||
const Y = target.getFullYear();
|
|
||||||
const M = String(target.getMonth() + 1).padStart(2, '0');
|
|
||||||
const D = String(target.getDate()).padStart(2, '0');
|
|
||||||
return `${Y}-${M}-${D} ${time}`;
|
|
||||||
},
|
|
||||||
getSortDate(messageList) {
|
getSortDate(messageList) {
|
||||||
return messageList.sort((a, b) => new Date(a.createTime) - new Date(b.createTime));
|
return messageList.sort((a, b) => new Date(a.createTime) - new Date(b.createTime));
|
||||||
},
|
},
|
||||||
|
|
@ -166,6 +132,7 @@ export default {
|
||||||
this.isHaveOldData = false;
|
this.isHaveOldData = false;
|
||||||
}
|
}
|
||||||
}).finally(()=>{
|
}).finally(()=>{
|
||||||
|
this.updateRead();
|
||||||
if (this.messageList.length>10) {
|
if (this.messageList.length>10) {
|
||||||
// 在数据更新后设置 scrollId
|
// 在数据更新后设置 scrollId
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|
@ -178,6 +145,9 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
updateRead() {
|
updateRead() {
|
||||||
|
if (this.msgList.length === 0) return;
|
||||||
|
var unReadList = this.messageList.filter(item => item.readStatus === 0);
|
||||||
|
if (unReadList.length === 0) return;
|
||||||
updateRead({msgType: "status"}).then(response => {
|
updateRead({msgType: "status"}).then(response => {
|
||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
console.info("更新已读成功")
|
console.info("更新已读成功")
|
||||||
|
|
@ -218,7 +188,10 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
gotoDevice(item) {
|
gotoDevice(item) {
|
||||||
|
const agriList = uni.getStorageSync('agri_list')
|
||||||
|
if (agriList.length === 0 || !agriList.includes(item.imei)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
this.$tab.navigateTo(item.linkUrl)
|
this.$tab.navigateTo(item.linkUrl)
|
||||||
},
|
},
|
||||||
ackAlarm(topic, payload) {
|
ackAlarm(topic, payload) {
|
||||||
|
|
|
||||||
|
|
@ -76,7 +76,6 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {listAgri} from "@/api/system/assets/agri";
|
import {listAgri} from "@/api/system/assets/agri";
|
||||||
import {getAutoLogList} from "@/api/warn/autolog";
|
|
||||||
import {formatDate} from "@/uni_modules/uni-dateformat/components/uni-dateformat/date-format";
|
import {formatDate} from "@/uni_modules/uni-dateformat/components/uni-dateformat/date-format";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
|
|
@ -342,6 +342,43 @@ export function isTodayDate(dateInput) {
|
||||||
return targetDateOnly.getTime() === todayDate.getTime();
|
return targetDateOnly.getTime() === todayDate.getTime();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export function formatTime(timeStr) {
|
||||||
|
console.info('timeStr', timeStr)
|
||||||
|
const now = new Date();
|
||||||
|
const target = new Date(timeStr);
|
||||||
|
const diff = now - target;
|
||||||
|
const day = 86400000;
|
||||||
|
const week = 7 * day;
|
||||||
|
|
||||||
|
// 时间
|
||||||
|
const h = String(target.getHours()).padStart(2, '0');
|
||||||
|
const m = String(target.getMinutes()).padStart(2, '0');
|
||||||
|
const time = `${h}:${m}`;
|
||||||
|
|
||||||
|
// 今天
|
||||||
|
if (now.toDateString() === target.toDateString())
|
||||||
|
return `${time}`;
|
||||||
|
|
||||||
|
// 昨天
|
||||||
|
const yest = new Date(now);
|
||||||
|
yest.setDate(now.getDate() - 1);
|
||||||
|
if (yest.toDateString() === target.toDateString())
|
||||||
|
return `昨天 ${time}`;
|
||||||
|
|
||||||
|
// 7天内
|
||||||
|
if (diff <= week) {
|
||||||
|
const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
|
||||||
|
return `星期${weekMap[target.getDay()]} ${time}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 7天前
|
||||||
|
const Y = target.getFullYear();
|
||||||
|
const M = String(target.getMonth() + 1).padStart(2, '0');
|
||||||
|
const D = String(target.getDate()).padStart(2, '0');
|
||||||
|
return `${Y}-${M}-${D} ${time}`;
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* 判断传入的日期是否是今天
|
* 判断传入的日期是否是今天
|
||||||
* 支持格式:Date对象、时间戳、字符串(yyyy-MM-dd HH:mm:ss、yyyy-MM-dd、ISO格式等)
|
* 支持格式:Date对象、时间戳、字符串(yyyy-MM-dd HH:mm:ss、yyyy-MM-dd、ISO格式等)
|
||||||
|
|
|
||||||
|
|
@ -337,6 +337,7 @@ export function updateSubscribeTopic() {
|
||||||
if (!clientId) {
|
if (!clientId) {
|
||||||
throw new Error('MQTT clientId 为空,无法生成订阅主题');
|
throw new Error('MQTT clientId 为空,无法生成订阅主题');
|
||||||
}
|
}
|
||||||
|
const agriList = [];
|
||||||
// 1. 获取设备列表(纯.then/.catch回调)
|
// 1. 获取设备列表(纯.then/.catch回调)
|
||||||
listAgri().then(response => {
|
listAgri().then(response => {
|
||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
|
|
@ -344,10 +345,12 @@ export function updateSubscribeTopic() {
|
||||||
// 生成设备订阅主题(校验imei非空)
|
// 生成设备订阅主题(校验imei非空)
|
||||||
response.rows.forEach(item => {
|
response.rows.forEach(item => {
|
||||||
if (item?.imei) {
|
if (item?.imei) {
|
||||||
|
agriList.push(item.imei);
|
||||||
subscribeList.push(`frontend/${clientId}/dtu/${item.imei}/+`);
|
subscribeList.push(`frontend/${clientId}/dtu/${item.imei}/+`);
|
||||||
subscribeList.push(`device/${item.imei}/+`);
|
subscribeList.push(`device/${item.imei}/+`);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
uni.setStorageSync('agri_list', agriList);
|
||||||
// 管理员额外订阅指定设备
|
// 管理员额外订阅指定设备
|
||||||
if (store.getters && store.getters.name === 'admin') {
|
if (store.getters && store.getters.name === 'admin') {
|
||||||
subscribeList.push(`frontend/${clientId}/dtu/862538065276061/+`);
|
subscribeList.push(`frontend/${clientId}/dtu/862538065276061/+`);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue