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>
|