1327 lines
33 KiB
Vue
1327 lines
33 KiB
Vue
<template>
|
||
<view>
|
||
<uni-nav-bar class="nvbar" leftIcon="left" @clickLeft="navigatorBack">
|
||
<view slot="left">
|
||
<uni-icons type="back" size="23" color="#FFFFFF"></uni-icons>
|
||
</view>
|
||
<view slot="default" class="center uninavebartext">
|
||
{{ Status.navbar.title }}
|
||
</view>
|
||
</uni-nav-bar>
|
||
<view class="contentBg">
|
||
<view class="row">
|
||
<view class="typeItem fleft" :class="{'active':Status.tabType=='link'}" @click.stop="tabChange('link')">
|
||
连接记录</view>
|
||
<view class="typeItem fleft" :class="{'active':Status.tabType=='warn'}" @click.stop="tabChange('warn')">
|
||
报警记录</view>
|
||
<view class="filterIco fright" @click.stop="showFilter()">
|
||
<image class="img" src="/static/images/common/filter.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="clear"></view>
|
||
</view>
|
||
<view class="row" v-show="Status.tabType=='warn'">
|
||
<view class="typeItem fleft" :class="{'active':filter.warnType=='all'}" @click.stop="warnChange('all')">
|
||
全部报警</view>
|
||
<view class="typeItem fleft" :class="{'active':filter.warnType=='join'}"
|
||
@click.stop="warnChange('join')">
|
||
闯入报警</view>
|
||
<view class="typeItem fleft" :class="{'active':filter.warnType=='force'}"
|
||
@click.stop="warnChange('force')">
|
||
强制报警</view>
|
||
<view class="clear"></view>
|
||
</view>
|
||
|
||
|
||
<mescroll-uni class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback"
|
||
:up="Status.upOption" :down="Status.downOption" :fixed="false"
|
||
:style="{ height: Status.mescrollHeight + 'px' }">
|
||
|
||
|
||
<view v-show="Status.tabType=='link'" class="linkLi" v-for="item,index in linkList">
|
||
<view class="header" :class="{expand:item.expand}" @click.stop="ExpandToggle(item,index,'link')">
|
||
<text>{{DateFormat(item.linkEqs[0].linkTime,'yyyy-MM-dd HH:mm:ss')}}</text>
|
||
<uni-icons type="right" v-show="!item.expand" color="#FFFFFF" size="16"></uni-icons>
|
||
<uni-icons type="down" v-if="item.expand" color="#aed600" size="17"></uni-icons>
|
||
</view>
|
||
<view v-if="item.expand" class="body">
|
||
<view class="listItem">
|
||
<view>设备数量</view>
|
||
<view>{{item.linkEqs.length}}</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="listItem" v-for="dev,i in item.linkEqs">
|
||
<view>设备名称</view>
|
||
<view>{{dev.linkName?dev.linkName:dev.linkMac}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-show="Status.tabType=='warn'" class="warnPanel">
|
||
|
||
<view class="warnCardHeader" v-show="warnList.length>0">
|
||
<view class="column">报警类型</view>
|
||
<view class="column">设备名称</view>
|
||
<view class="column">报警时间</view>
|
||
</view>
|
||
<view class="warnLi" :class="{'first':index==0,'last':index==warnList.length-1}"
|
||
v-for="item,index in warnList">
|
||
<view class="column red">{{item.warnType}}</view>
|
||
<view class="column">{{item.warnName?item.warnName:item.warnMac}}</view>
|
||
<view class="column">
|
||
<view>{{DateFormat(item.warnTime,'yyyy/MM/dd')}}</view>
|
||
<view>{{DateFormat(item.warnTime,'HH:mm:ss')}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</mescroll-uni>
|
||
|
||
<view v-if="Status.BottomMenuShow" class="prevContent" @click.stop="showFilter()">
|
||
<view class="p100" @click.stop="">
|
||
<view class="filterMode">
|
||
<view class="fleft modeItem" @click.stop="filterModeChange()"
|
||
:class="{ active: !Status.filterMode }">月份选择</view>
|
||
<view class="fleft modeItem" @click.stop="filterModeChange()"
|
||
:class="{ active: Status.filterMode }">自定义时间</view>
|
||
<view class="clear"></view>
|
||
</view>
|
||
<view v-show="Status.filterMode">
|
||
<view class="mothPanel">
|
||
<view class="mothItem center" :class="{active:Status.filterDayType=='monthThree'}"
|
||
@click.stop="mothItemChange('monthThree')">近三个月</view>
|
||
<view class="mothItem center" :class="{active:Status.filterDayType=='monthOne'}"
|
||
@click.stop="mothItemChange('monthOne')" }>近一个月</view>
|
||
<view class="mothItem center" :class="{active:Status.filterDayType=='customer'}"
|
||
@click.stop="mothItemChange('customer')">自定义</view>
|
||
|
||
</view>
|
||
<view class="mothPanel">
|
||
<view class="mask" v-show="Status.filterMode && Status.filterDayType!='customer'"></view>
|
||
<view class="mtxt center" :class="{active:Status.filterDayMode=='start'}"
|
||
@click.stop="Status.filterDayMode='start'">
|
||
{{filter.start}}
|
||
</view>
|
||
<view class="mspl center">
|
||
一
|
||
</view>
|
||
<view class="mtxt center" :class="{active:Status.filterDayMode=='end'}"
|
||
@click.stop="Status.filterDayMode='end'">
|
||
{{filter.end}}
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="previewPannel">
|
||
<view class="mask" v-show="Status.filterMode && Status.filterDayType!='customer'"></view>
|
||
|
||
<picker-view indicator-class="myIndicator" :value="Status.datePickValue" @change="bindChange"
|
||
class="picker-view">
|
||
<picker-view-column>
|
||
<view class="item center" :class="{
|
||
active: Status.datePickValue[0] == index,
|
||
borderLeft: Status.datePickValue[0] === index,
|
||
preOne:
|
||
Status.datePickValue[0] === index - 1 ||
|
||
Status.datePickValue[0] === index + 1,
|
||
preTwo:
|
||
Status.datePickValue[0] === index - 2 ||
|
||
Status.datePickValue[0] === index + 2,
|
||
}" v-for="(item, index) in dic.years" :key="index">{{ item }}年</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view class="item center" :class="{
|
||
active: Status.datePickValue[1] === index,
|
||
preOne:
|
||
Status.datePickValue[1] === index - 1 ||
|
||
Status.datePickValue[1] === index + 1,
|
||
preTwo:
|
||
Status.datePickValue[1] === index - 2 ||
|
||
Status.datePickValue[1] === index + 2,
|
||
}" v-for="(item, index) in dic.months" :key="index">{{ item }}月</view>
|
||
</picker-view-column>
|
||
<picker-view-column v-if="Status.filterMode">
|
||
<view class="item center" :class="{
|
||
active: Status.datePickValue[2] == index,
|
||
borderRight: Status.datePickValue[2] == index,
|
||
preOne:
|
||
Status.datePickValue[2] === index - 1 ||
|
||
Status.datePickValue[2] === index + 1,
|
||
preTwo:
|
||
Status.datePickValue[2] === index - 2 ||
|
||
Status.datePickValue[2] === index + 2,
|
||
}" v-for="(item, index) in dic.days" :key="index">{{ item }}日</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
</view>
|
||
<view class="footerBtn">
|
||
<view class="btn btnReset" @click.stop="checkDateReset();">重置</view>
|
||
<view class="btn btnOK" @click.stop="checkDateOK()">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<global-loading ref="loading" />
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import {
|
||
showLoading,
|
||
hideLoading,
|
||
updateLoading
|
||
} from "@/utils/loading.js";
|
||
import Common from "@/utils/Common.js";
|
||
|
||
var these = null;
|
||
var time = null;
|
||
export default {
|
||
data() {
|
||
return {
|
||
mescroll: null,
|
||
Status: {
|
||
navbar: {
|
||
title: "历史记录",
|
||
},
|
||
mescrollHeight: 100,
|
||
upOption: {
|
||
auto: false,
|
||
noMoreSize: 0,
|
||
offset: 50,
|
||
isLock: false,
|
||
empty: {
|
||
tip: "暂无数据",
|
||
hideScroll: false,
|
||
},
|
||
textNoMore: "没有更多数据了",
|
||
},
|
||
downOption: {
|
||
auto: true,
|
||
autoShowLoading: false,
|
||
},
|
||
BottomMenuShow: false, //是否显示底部筛选层
|
||
filterMode: true, //是否筛选日期
|
||
filterDayMode: 'end', //当前筛选的是开始还是结束
|
||
filterDayType: 'customer', //当前筛选的日期是哪种类型
|
||
tabType: 'link',
|
||
|
||
datePickValue: [999, 999, 999] //日期选择控件绑定的值
|
||
|
||
},
|
||
filter: {
|
||
MM: '',
|
||
start: '',
|
||
end: '',
|
||
warnType: 'all',
|
||
},
|
||
linkList: [], //连接记录
|
||
warnList: [], //报警记录
|
||
dic: {
|
||
years: [],
|
||
months: [],
|
||
days: [],
|
||
},
|
||
device: {
|
||
id: "",
|
||
deviceName: "",
|
||
deviceImei: "",
|
||
deviceMac: "",
|
||
communicationMode: 0,
|
||
devicePic: "",
|
||
typeName: "",
|
||
bluetoothName: null,
|
||
deviceStatus: null,
|
||
bindingTime: "",
|
||
onlineStatus: 0,
|
||
battery: "0",
|
||
latitude: null,
|
||
longitude: null,
|
||
alarmStatus: null,
|
||
detailPageUrl: "/pages/650/HBY650",
|
||
showConfirm: false
|
||
},
|
||
};
|
||
},
|
||
onLoad() {
|
||
these = this;
|
||
this.getSystemInfoSyncH();
|
||
this.checkDateReset();
|
||
this.mothItemChange('customer');
|
||
|
||
let eventChannel = this.getOpenerEventChannel();
|
||
|
||
eventChannel.on('detailData', function(data) {
|
||
var device = data.data;
|
||
these.device = device;
|
||
these.tabChange('link');
|
||
});
|
||
|
||
|
||
},
|
||
computed: {},
|
||
methods: {
|
||
DateFormat: function(date, format) {
|
||
return Common.DateFormat(date, format);
|
||
},
|
||
ExpandToggle(item, index, type) {
|
||
|
||
let expand = item.expand;
|
||
if (expand === undefined) {
|
||
expand = false;
|
||
}
|
||
if (type == 'link') {
|
||
|
||
this.$set(this.linkList[index], 'expand', !expand)
|
||
} else {
|
||
this.$set(this.warnList[index], 'expand', !expand)
|
||
}
|
||
},
|
||
tabChange(key) {
|
||
this.Status.tabType = key;
|
||
|
||
this.downCallback();
|
||
},
|
||
warnChange(key) {
|
||
this.filter.warnType = key;
|
||
this.downCallback();
|
||
},
|
||
mothItemChange(key) {
|
||
|
||
this.Status.filterDayType = key;
|
||
let diff = 0;
|
||
switch (key) {
|
||
case "monthThree":
|
||
diff = -2;
|
||
break;
|
||
case "monthOne":
|
||
diff = -1;
|
||
break;
|
||
case "customer":
|
||
diff = 0;
|
||
break;
|
||
}
|
||
let today = new Date();
|
||
let end = Common.DateFormat(today, 'yyyy-MM-dd');
|
||
|
||
let start = Common.DateFormat(today.setMonth(diff), 'yyyy-MM-dd');
|
||
this.filter.start = start;
|
||
this.filter.end = end;
|
||
|
||
this.Status.filterDayMode = 'end';
|
||
},
|
||
checkDateReset() {
|
||
if (this.Status.filterMode && this.Status.filterDayType != 'customer') {
|
||
return;
|
||
}
|
||
this.Inityears();
|
||
this.initMonths();
|
||
|
||
this.dic.days = [];
|
||
|
||
if (this.Status.filterMode) {
|
||
this.initDays();
|
||
let day = new Date().getDate();
|
||
this.dic.days.find((item, idx) => {
|
||
if (item == day) {
|
||
this.Status.datePickValue[2] = idx;
|
||
return true;
|
||
}
|
||
});
|
||
|
||
|
||
}
|
||
//在浏览器上修改了datePickValue值，控件不刷新，直接修改dom的样式，App无此问题
|
||
//为了方便在浏览器中查看效果，添加以下代码
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
if (systemInfo.uniPlatform == 'web') {
|
||
setTimeout(() => {
|
||
if (!document) {
|
||
console.error("document不可用");
|
||
|
||
return;
|
||
}
|
||
|
||
|
||
let eles = document.querySelectorAll('.uni-picker-view-content');
|
||
if (eles && eles.length && eles.length > 0) {
|
||
let top0 = this.Status.datePickValue[0] * 34;
|
||
top0 = 'translateY(-' + top0 + 'px) translateZ(0px)';
|
||
eles[0].style.transform = top0;
|
||
|
||
top0 = this.Status.datePickValue[1] * 34;
|
||
top0 = 'translateY(-' + top0 + 'px) translateZ(0px)';
|
||
eles[1].style.transform = top0;
|
||
if (eles.length === 3 && this.Status.filterMode) {
|
||
top0 = this.Status.datePickValue[2] * 34;
|
||
top0 = 'translateY(-' + top0 + 'px) translateZ(0px)';
|
||
eles[2].style.transform = top0;
|
||
}
|
||
}
|
||
}, 50);
|
||
}
|
||
|
||
|
||
},
|
||
checkDateOK() {
|
||
let yyyy = this.dic.years[this.Status.datePickValue[0]];
|
||
let MM = this.dic.months[this.Status.datePickValue[1]];
|
||
MM = MM < 10 ? '0' + MM : MM;
|
||
if (this.Status.filterMode) { //选择了时间段
|
||
this.filter.MM = "";
|
||
} else {
|
||
this.filter.start = "";
|
||
this.filter.end = "";
|
||
this.filter.MM = yyyy + '-' + MM;
|
||
}
|
||
this.Status.BottomMenuShow = false;
|
||
this.downCallback();
|
||
|
||
},
|
||
showFilter() {
|
||
this.Status.BottomMenuShow = !this.Status.BottomMenuShow;
|
||
},
|
||
filterModeChange() {
|
||
this.Status.filterMode = !this.Status.filterMode;
|
||
if (this.Status.filterMode) {
|
||
this.filter.MM = '';
|
||
this.initDays();
|
||
} else {
|
||
this.filter.start = '';
|
||
this.filter.end = '';
|
||
this.Status.filterDayType = '';
|
||
}
|
||
},
|
||
Inityears: function() {
|
||
let start = 2025;
|
||
let end = new Date().getFullYear();
|
||
let yyyy = [];
|
||
|
||
for (var i = start; i <= end; i++) {
|
||
yyyy.push(i);
|
||
|
||
}
|
||
if (yyyy.length < 5) {
|
||
for (var j = start; j >= 1970; j--) {
|
||
yyyy.unshift(j);
|
||
if (yyyy.length == 5) {
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
this.Status.datePickValue[0] = yyyy.length - 1;
|
||
this.dic.years = yyyy;
|
||
},
|
||
initMonths: function() {
|
||
let mms = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
||
let month = new Date().getMonth() + 1;
|
||
mms.find((i, index) => {
|
||
if (i === month) {
|
||
this.Status.datePickValue[1] = index;
|
||
|
||
return true;
|
||
}
|
||
});
|
||
|
||
this.dic.months = mms;
|
||
},
|
||
initDays() {
|
||
if (!this.Status.filterMode) {
|
||
return;
|
||
}
|
||
|
||
let yyyy = this.dic.years[this.Status.datePickValue[0]];
|
||
let mm = this.dic.months[this.Status.datePickValue[1]];
|
||
let days = 30;
|
||
switch (mm) {
|
||
case 1:
|
||
case 3:
|
||
case 5:
|
||
case 7:
|
||
case 8:
|
||
case 10:
|
||
case 12: {
|
||
days = 31;
|
||
break;
|
||
}
|
||
case 2: {
|
||
if (yyyy && mm) {
|
||
days =
|
||
(yyyy % 4 === 0 && yyyy % 100 !== 0) || yyyy % 400 === 0 ?
|
||
29 :
|
||
28;
|
||
} else {
|
||
days = 28;
|
||
}
|
||
break;
|
||
}
|
||
default:
|
||
days = 30;
|
||
break;
|
||
}
|
||
|
||
let arr = [];
|
||
for (let i = 1; i <= days; i++) {
|
||
arr.push(i);
|
||
}
|
||
this.dic.days = arr;
|
||
},
|
||
bindChange(e) {
|
||
|
||
let val = e.detail.value;
|
||
this.Status.datePickValue = val;
|
||
if (this.Status.filterMode) {
|
||
setTimeout(() => {
|
||
this.initDays();
|
||
let yyyy = this.dic.years[this.Status.datePickValue[0]];
|
||
let MM = this.dic.months[this.Status.datePickValue[1]];
|
||
MM = MM < 10 ? '0' + MM : MM
|
||
let dd = this.dic.days[this.Status.datePickValue[2]];
|
||
dd = dd < 10 ? '0' + dd : dd;
|
||
let date = yyyy + '-' + MM + '-' + dd;
|
||
if (this.Status.filterDayMode == 'start') {
|
||
this.filter.start = date;
|
||
} else {
|
||
this.filter.end = date;
|
||
}
|
||
}, 50);
|
||
}
|
||
|
||
|
||
},
|
||
navigatorBack() {
|
||
uni.navigateBack();
|
||
},
|
||
getSystemInfoSyncH() {
|
||
|
||
let sysInfo = uni.getSystemInfoSync();
|
||
this.Status.mescrollHeight = sysInfo.screenHeight - 140;
|
||
console.log("mescrollHeight=", this.Status.mescrollHeight);
|
||
},
|
||
mescrollInit(mescroll) {
|
||
this.mescroll = mescroll;
|
||
},
|
||
// 下拉刷新
|
||
downCallback() {
|
||
console.log("下拉加载");
|
||
if (this.mescroll) {
|
||
this.mescroll.resetUpScroll(false);
|
||
this.mescroll.scrollTo(0, 0);
|
||
}
|
||
this.getData();
|
||
},
|
||
// 上拉加载
|
||
upCallback() {
|
||
console.log("上拉加载");
|
||
|
||
this.getData();
|
||
},
|
||
getData() {
|
||
clearTimeout(time);
|
||
time = setTimeout(() => {
|
||
console.error("正在加载第" + these.mescroll.num + "页数据");
|
||
|
||
let hasNext = true;
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
if (!these.device.id && systemInfo.uniPlatform != 'web') {
|
||
|
||
these.mescroll.endSuccess(0, hasNext);
|
||
return;
|
||
}
|
||
|
||
let linkKey = "102_" + these.device.id + "_linked";
|
||
let warnKey = "102_" + these.device.id + "_warning";
|
||
|
||
let getLinkData = () => {
|
||
console.log("11111111111111111");
|
||
let arr = [];
|
||
let total = 0;
|
||
if (systemInfo.uniPlatform == 'web') {
|
||
total = 100;
|
||
for (let i = 0; i < 20; i++) {
|
||
const timestamp = 1710072900000 + (i * 3600000); // 每小时递增
|
||
const numItems = Math.floor(Math.random() * 5) + 1; // 1-5条
|
||
|
||
const item = {
|
||
"linkId": timestamp.toString(),
|
||
"linkEqs": []
|
||
};
|
||
|
||
for (let j = 0; j < numItems; j++) {
|
||
// 生成随机的linkTime和linkMac
|
||
const hours = Math.floor(Math.random() * 24);
|
||
const minutes = Math.floor(Math.random() * 60);
|
||
const macPart = () => Math.floor(Math.random() * 256).toString(16)
|
||
.padStart(2, '0')
|
||
.toUpperCase();
|
||
const mac =
|
||
`${macPart()}:${macPart()}:${macPart()}:${macPart()}:${macPart()}:${macPart()}`;
|
||
|
||
let date =
|
||
`2026-01-${11 + Math.floor(i/24)}T${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00Z`;
|
||
date = Common.DateFormat(new Date(date), 'yyyy-MM-dd HH:mm:ss');
|
||
item.linkEqs.push({
|
||
"linkTime": date,
|
||
"linkMac": mac
|
||
});
|
||
}
|
||
|
||
arr.push(item);
|
||
}
|
||
} else {
|
||
debugger;
|
||
let array = uni.getStorageSync(linkKey);
|
||
console.log("arrary=", array);
|
||
let data = [];
|
||
if (array) {
|
||
data = data.concat(array);
|
||
} else {
|
||
data = [{
|
||
"linkId": 1769582277562,
|
||
"read": false,
|
||
"linkEqs": [{
|
||
"linkTime": "2026-01-28T06:38:26.487Z",
|
||
"linkMac": "9A:ED:F1:72:AB:3C"
|
||
},
|
||
{
|
||
"linkTime": "2026-01-28T06:38:26.487Z",
|
||
"linkMac": "EE:97:ED:F1:72:AB:3C"
|
||
}
|
||
]
|
||
}];
|
||
}
|
||
let start=null;
|
||
let end=null;
|
||
if (!these.Status.filterMode) {
|
||
if (these.filter.MM) {
|
||
start = new Date(these.filter.MM + '-01');
|
||
end = start.setMonth(1);
|
||
data = data.filter(v => {
|
||
|
||
let t = v.linkEqs[0].linkTime
|
||
if (!t instanceof Date) {
|
||
t = new Date(v.linkEqs[0].linkTime);
|
||
}
|
||
|
||
return t >= start && t <= end;
|
||
});
|
||
}
|
||
|
||
} else {
|
||
if (these.filter.start && these.filter.end) {
|
||
console.log("these.filter.start=",these.filter.start);
|
||
console.log("these.filter.end=",these.filter.end);
|
||
start = new Date(these.filter.start);
|
||
end = new Date(these.filter.end);
|
||
end.setMonth(1);
|
||
console.log("start=",start);
|
||
console.log("end=",end);
|
||
if(start && end){
|
||
data = data.filter(v => {
|
||
debugger;
|
||
let t = v.linkEqs[0].linkTime
|
||
if (!(t instanceof Date)) {
|
||
t = new Date(v.linkEqs[0].linkTime);
|
||
}
|
||
|
||
if(t >= start && t <= end){
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
}
|
||
|
||
} else if (these.filter.start) {
|
||
start = new Date(these.filter.start);
|
||
|
||
data = data.filter(v => {
|
||
let t = v.linkEqs[0].linkTime
|
||
if (!(t instanceof Date)) {
|
||
t = new Date(v.linkEqs[0].linkTime);
|
||
}
|
||
|
||
return t >= start;
|
||
});
|
||
} else if (these.filter.end) {
|
||
end = new Date(these.filter.end).setMonth(1);
|
||
|
||
data = data.filter(v => {
|
||
|
||
let t = v.linkEqs[0].linkTime
|
||
if (!(t instanceof Date)) {
|
||
t = new Date(v.linkEqs[0].linkTime);
|
||
}
|
||
|
||
return t < end;
|
||
});
|
||
}
|
||
|
||
}
|
||
|
||
total = data.length;
|
||
let bgIdx = (these.mescroll.num - 1) * 20;
|
||
let endIdx = these.mescroll.num * 20;
|
||
|
||
arr = data.slice(bgIdx, endIdx);
|
||
|
||
|
||
}
|
||
|
||
return {
|
||
rows: arr,
|
||
total: total
|
||
};
|
||
}
|
||
|
||
let getWarnData = () => {
|
||
|
||
let arr = [];
|
||
let total = 0;
|
||
if (systemInfo.uniPlatform == 'web') {
|
||
|
||
for (let i = 0; i < 20; i++) {
|
||
const timestamp = 1710072900000 + (i * 3600000); // 每小时递增
|
||
const numItems = Math.floor(Math.random() * 5) + 1; // 1-5条
|
||
|
||
const item = {
|
||
"linkId": timestamp.toString(),
|
||
"linkEqs": []
|
||
};
|
||
|
||
|
||
// 生成随机的linkTime和linkMac
|
||
const hours = Math.floor(Math.random() * 24);
|
||
const minutes = Math.floor(Math.random() * 60);
|
||
const macPart = () => Math.floor(Math.random() * 256).toString(16).padStart(2,
|
||
'0')
|
||
.toUpperCase();
|
||
const mac =
|
||
`${macPart()}:${macPart()}:${macPart()}:${macPart()}:${macPart()}:${macPart()}`;
|
||
|
||
let date =
|
||
`2026-01-${11 + Math.floor(i/24)}T${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00Z`;
|
||
date = Common.DateFormat(new Date(date), 'yyyy-MM-dd HH:mm:ss');
|
||
let warnType = ""; //
|
||
if (these.filter.warnType == 'all') {
|
||
warnType = Math.floor(Math.random() * 100) % 2 == 1 ? '闯入报警' : '强制报警'
|
||
total = 100;
|
||
} else if (these.filter.warnType == 'join') {
|
||
warnType = '闯入报警';
|
||
total = 50;
|
||
} else {
|
||
warnType = '强制报警';
|
||
total = 50;
|
||
}
|
||
|
||
arr.push({
|
||
linkId: timestamp.toString(),
|
||
warnType: warnType,
|
||
warnMac: mac,
|
||
warnTime: date,
|
||
warnName: ""
|
||
});
|
||
}
|
||
} else {
|
||
let array = uni.getStorageSync(warnKey);
|
||
let data = [];
|
||
if (array) {
|
||
data = data.concat(array);
|
||
}
|
||
if (these.filter.warnType != 'all') {
|
||
let type = these.filter.warnType == 'join' ? '闯入报警' : '强制报警';
|
||
data = data.filter(v => {
|
||
return v.warnType == type;
|
||
});
|
||
}
|
||
if (these.Status.filterMode) {
|
||
if (these.filter.start && these.filter.end) {
|
||
|
||
console.log("these.filter.start=" + these.filter.start);
|
||
console.log("hese.filter.end=" + these.filter.end);
|
||
let start = new Date(these.filter.start);
|
||
let end = new Date(these.filter.end);
|
||
end.setMonth(1);
|
||
data = data.filter(v => {
|
||
|
||
let t = v.warnTime
|
||
if (!(t instanceof Date)) {
|
||
t = new Date(v.warnTime);
|
||
}
|
||
|
||
return t >= start && t <= end;
|
||
});
|
||
} else if (these.filter.start) {
|
||
let start = new Date(these.filter.start);
|
||
data = data.filter(v => {
|
||
|
||
let t = v.warnTime
|
||
if (!(t instanceof Date)) {
|
||
t = new Date(v.warnTime);
|
||
}
|
||
|
||
return t >= start;
|
||
});
|
||
} else if (these.filter.end) {
|
||
let end = new Date(these.filter.end).setMonth(1);
|
||
data = data.filter(v => {
|
||
let t = v.warnTime
|
||
if (!(t instanceof Date)) {
|
||
t = new Date(v.warnTime);
|
||
}
|
||
return t < end;
|
||
});
|
||
}
|
||
} else {
|
||
if (these.filter.MM) {
|
||
let start = new Date(these.filter.MM + '-01');
|
||
let end = start.setMonth(1);
|
||
data = data.filter((v) => {
|
||
let t = v.warnTime
|
||
if (!(t instanceof Date)){
|
||
t = new Date(v.warnTime);
|
||
}
|
||
return t >= start && t < end;
|
||
});
|
||
}
|
||
|
||
}
|
||
|
||
console.error("data=", data);
|
||
total = data.length;
|
||
let bgIdx = (these.mescroll.num - 1) * 20;
|
||
let endIdx = these.mescroll.num * 20;
|
||
|
||
arr = data.slice(bgIdx, endIdx);
|
||
|
||
|
||
|
||
}
|
||
|
||
return {
|
||
rows: arr,
|
||
total: total
|
||
};
|
||
}
|
||
|
||
let readMsg = (arr) => {
|
||
let keys = [linkKey, warnKey];
|
||
for (let index = 0; index < keys.length; index++) {
|
||
let key = keys[index];
|
||
|
||
let array = uni.getStorageSync(key)
|
||
let flag = false;
|
||
for (let i = 0; i < array.length; i++) {
|
||
let msg = arr.find(v => {
|
||
return v.key == array[i].key
|
||
});
|
||
if (msg && !msg.read) {
|
||
flag = true;
|
||
array[i].read = true;
|
||
}
|
||
|
||
}
|
||
if (flag) {
|
||
uni.setStorage({
|
||
key: key,
|
||
data: array
|
||
});
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
let data = null;
|
||
if (these.Status.tabType == 'link') {
|
||
data = getLinkData();
|
||
|
||
if (these.mescroll.num == 1) {
|
||
these.linkList = data.rows;
|
||
} else {
|
||
these.linkList = these.linkList.concat(data.rows);
|
||
}
|
||
|
||
if (data.length < 20 || these.linkList.length >= data.total) {
|
||
hasNext = false;
|
||
} else {
|
||
hasNext = true;
|
||
}
|
||
|
||
} else {
|
||
data = getWarnData();
|
||
if (these.mescroll.num == 1) {
|
||
these.warnList = data.rows;
|
||
} else {
|
||
these.warnList = these.warnList.concat(data.rows);
|
||
}
|
||
|
||
if (data.length < 20 || these.warnList.length >= data.total) {
|
||
hasNext = false;
|
||
} else {
|
||
hasNext = true;
|
||
}
|
||
}
|
||
|
||
|
||
readMsg(data.rows);
|
||
these.mescroll.endSuccess(data.rows.length, hasNext);
|
||
|
||
|
||
},
|
||
500);
|
||
|
||
|
||
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.uninavebartext {
|
||
width: 100%;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.contentBg {
|
||
height: calc(100vh - 44px) !important;
|
||
width: 100%;
|
||
|
||
height: auto;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.row {
|
||
width: 100%;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.row .typeItem {
|
||
width: 160rpx;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.row .typeItem.active {
|
||
color: #AED600;
|
||
}
|
||
|
||
.row .typeItem.active::after {
|
||
content: "";
|
||
z-index: 1;
|
||
position: absolute;
|
||
width: 16px;
|
||
height: 4px;
|
||
border-radius: 30px;
|
||
background: #AED600;
|
||
transform: translateX(-50%);
|
||
top: 45rpx;
|
||
left: 50%;
|
||
}
|
||
|
||
.row .filterIco {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.row .filterIco .img {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
}
|
||
|
||
.p100 {
|
||
width: 100%;
|
||
height: auto;
|
||
border-radius: 20px 20px 0px 0px;
|
||
background-color: rgba(42, 42, 42, 1);
|
||
box-sizing: border-box;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.prevContent {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
position: fixed;
|
||
top: 0px;
|
||
left: 0px;
|
||
|
||
z-index: 999;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-content: flex-end;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
/* background-color: #00000000; */
|
||
}
|
||
|
||
.prevContent .previewPannel {
|
||
width: 100%;
|
||
height: 170px;
|
||
box-sizing: border-box;
|
||
background-color: #00000000;
|
||
position: relative;
|
||
z-index: 2;
|
||
margin: 30rpx 0rpx;
|
||
}
|
||
|
||
.prevContent .previewPannel .mask,
|
||
.mothPanel .mask {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
z-index: 3;
|
||
background-color: #00000000;
|
||
|
||
}
|
||
|
||
.prevContent .filterMode {
|
||
height: 80rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-content: center;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.filterMode .modeItem {
|
||
width: 30%;
|
||
text-align: center;
|
||
height: 60rpx;
|
||
line-height: 40rpx;
|
||
color: #ffffff66;
|
||
font-family: "PingFang SC";
|
||
font-style: Regular;
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
position: relative;
|
||
}
|
||
|
||
.filterMode .modeItem.active {
|
||
color: rgba(174, 214, 0, 1);
|
||
}
|
||
|
||
.filterMode .modeItem.active::after {
|
||
content: "";
|
||
position: absolute;
|
||
border-radius: 5px;
|
||
background-color: rgba(174, 214, 0, 1) !important;
|
||
|
||
width: 30rpx;
|
||
height: 10rpx;
|
||
bottom: 0px;
|
||
left: 50%;
|
||
z-index: 1;
|
||
-webkit-transform: translateX(-50%);
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.prevContent .footerBtn {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-content: center;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.prevContent .footerBtn .btn {
|
||
width: 240rpx;
|
||
height: 74rpx;
|
||
line-height: 74rpx;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
font-family: 'PingFang SC';
|
||
font-style: Medium;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
letter-spacing: 12rpx;
|
||
text-align: center;
|
||
border: 1px solid #00000000;
|
||
border-radius: 130rpx;
|
||
}
|
||
|
||
.prevContent .footerBtn .btn.btnReset {
|
||
|
||
border: 1px solid #ffffff !important;
|
||
|
||
color: #FFFFFF;
|
||
|
||
}
|
||
|
||
.prevContent .footerBtn .btn.btnOK {
|
||
background-color: #AED600;
|
||
color: #232323;
|
||
border-color: #AED600 !important;
|
||
}
|
||
|
||
.picker-view {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
background-color: #00000000;
|
||
}
|
||
|
||
/deep/ .myIndicator {
|
||
/* display: none !important; */
|
||
|
||
background: rgba(58, 58, 58, 1);
|
||
z-index: 0 !important;
|
||
}
|
||
|
||
/deep/.picker-view .myIndicator::before {
|
||
display: none !important;
|
||
}
|
||
|
||
/deep/.picker-view .myIndicator::after {
|
||
display: none !important;
|
||
}
|
||
|
||
/deep/.picker-view uni-picker-view-column:first-child .uni-picker-view-group .myIndicator {
|
||
border-top-left-radius: 34rpx !important;
|
||
border-bottom-left-radius: 34rpx !important;
|
||
}
|
||
|
||
/deep/.picker-view uni-picker-view-column:last-child .uni-picker-view-group .myIndicator {
|
||
border-top-right-radius: 34rpx !important;
|
||
border-bottom-right-radius: 34rpx !important;
|
||
}
|
||
|
||
.item {
|
||
text-align: center;
|
||
height: 34px;
|
||
font-family: "PingFang SC";
|
||
}
|
||
|
||
.item.active {
|
||
color: #bbe600;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.item.preOne {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.item.preTwo {
|
||
background: linear-gradient(180deg,
|
||
rgba(255, 255, 255, 0) 0%,
|
||
rgba(255, 255, 255, 0.5) 117.5%);
|
||
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-family: "PingFang SC";
|
||
font-style: Regular;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.picker-view .item.borderLeft {}
|
||
|
||
.picker-view .item.borderRight {}
|
||
|
||
.nvbar {
|
||
top: 0px;
|
||
}
|
||
|
||
.mothPanel {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 0px 30rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.mothPanel .mothItem {
|
||
width: 22%;
|
||
height: 55rpx;
|
||
border-radius: 16rpx;
|
||
background-color: #3A3A3A;
|
||
color: #FFFFFF57;
|
||
box-sizing: border-box;
|
||
border: 1px solid #00000000;
|
||
font-family: 'PingFang SC';
|
||
font-style: Regular;
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
text-align: center;
|
||
}
|
||
|
||
.mothPanel .mothItem.active,
|
||
.mothPanel .mtxt.active {
|
||
|
||
border: 1px solid #aed600 !important;
|
||
color: #aed600 !important;
|
||
}
|
||
|
||
|
||
.mothPanel .mtxt {
|
||
height: 80%;
|
||
width: 43%;
|
||
border-radius: 32rpx;
|
||
background: #3a3a3a;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
font-family: 'PingFang SC';
|
||
font-style: Regular;
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
text-align: center;
|
||
}
|
||
|
||
.mothPanel .mspl {
|
||
height: 100%;
|
||
width: 10%;
|
||
}
|
||
|
||
.linkLi {
|
||
height: auto;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 15rpx 0rpx;
|
||
|
||
color: rgba(255, 255, 255, 0.87);
|
||
|
||
font-family: 'PingFang SC';
|
||
font-style: Regular;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
|
||
letter-spacing: 0px;
|
||
text-align: left;
|
||
}
|
||
|
||
.linkLi .header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-content: center;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.linkLi .header.expand {
|
||
color: #aed600;
|
||
}
|
||
|
||
.linkLi .body {
|
||
border-radius: 16rpx;
|
||
background: rgba(26, 26, 26, 1);
|
||
width: 100%;
|
||
height: auto;
|
||
box-sizing: border-box;
|
||
padding: 20rpx;
|
||
margin: 10rpx 0rpx;
|
||
}
|
||
|
||
.linkLi .body .listHeader {}
|
||
|
||
.linkLi .body .line {
|
||
width: 100%;
|
||
height: 0rpx;
|
||
border-bottom: 1rpx solid #ffffff0f;
|
||
margin: 15rpx 0rpx;
|
||
}
|
||
|
||
.linkLi .body .listItem {
|
||
height: 50rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-content: center;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-family: 'PingFang SC';
|
||
font-style: Regular;
|
||
font-size: 28rpx;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.warnCardHeader {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-content: center;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 45px;
|
||
border-top-right-radius: 20rpx;
|
||
border-top-left-radius: 20rpx;
|
||
position: sticky;
|
||
z-index: 3;
|
||
top: 0rpx;
|
||
background: rgba(26, 26, 26, 1);
|
||
}
|
||
|
||
.warnCardHeader .column {
|
||
width: calc(100% / 3);
|
||
text-align: center;
|
||
}
|
||
|
||
.warnPanel {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
.warnLi {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-content: center;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 85rpx;
|
||
position: relative;
|
||
background: rgba(26, 26, 26, 1);
|
||
}
|
||
|
||
.warnLi.last {
|
||
border-bottom-left-radius: 20rpx;
|
||
border-bottom-right-radius: 20rpx;
|
||
}
|
||
|
||
.warnLi.first::before {
|
||
position: absolute;
|
||
content: "";
|
||
z-index: 2;
|
||
width: calc(100% - 60rpx);
|
||
|
||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||
top: 0px;
|
||
}
|
||
|
||
.warnLi::after {
|
||
position: absolute;
|
||
content: "";
|
||
z-index: 1;
|
||
width: calc(100% - 60rpx);
|
||
|
||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||
top: 100%;
|
||
|
||
}
|
||
|
||
.warnLi .column {
|
||
width: calc(100% / 3);
|
||
text-align: center;
|
||
}
|
||
|
||
.warnLi .column.red {
|
||
color: #e03434;
|
||
}
|
||
</style> |