<template>
|
<view class="container">
|
<view class="status_bar">
|
</view>
|
<uni-nav-bar class="header-bar" leftText="首页" rightIcon="gear" @clickLeft="goFrontPage" fixed="true"
|
@clickRight="goToSetting">
|
<view class="">
|
<!-- <uni-easyinput prefixIcon="search" :clearable="true" confirmType="search" v-model="searchVal"
|
placeholder="场景名称 摄像机地址" /> -->
|
<uni-search-bar v-model="searchVal" cancelButton="none" placeholder="场景名称 摄像机地址" @confirm="toSearch"
|
@clear="clearInput" @input="inputMethod">
|
</uni-search-bar>
|
</view>
|
</uni-nav-bar>
|
<view class="intro">
|
<!-- <view @tap="chooseMenu" class="tap-btn"></view> -->
|
<view class="top">
|
<view class="banner">
|
<view class="banner-img">
|
<image src="../../static/icon.png" mode="widthFix"></image>
|
</view>
|
<view class="">
|
<view class="title">
|
实时监控预警
|
</view>
|
<view class="desc">
|
涵盖多种检测消息，实时提醒
|
</view>
|
</view>
|
</view>
|
<view class="top-title">
|
<view class="t">
|
报警提醒
|
</view>
|
<button class="select-channel-btn" type="default" size="mini" @click="showAllChannel">全部通道
|
<uni-icons class="down-icon" type="arrowdown" size="11"></uni-icons>
|
</button>
|
|
</view>
|
</view>
|
|
|
<view class="total-list">
|
<view v-for="(item,index) in daysArr" :key="index">
|
<view class="day-time">
|
{{item.day}}
|
</view>
|
<view class="list-item" v-for="(x,i) in item.items" @tap="toDetail(x)">
|
<view class="left-img">
|
<image :src="'/httpImage/' + x.imgUrl" mode=""></image>
|
|
</view>
|
<view class="right-desc">
|
<div class="triangle-topright" :ref="x.id" v-if="!x.isRead">
|
<div class="word">未读</div>
|
</div>
|
<view class="first">
|
<view class="name">
|
{{x.name}}
|
</view>
|
<view class="level">
|
<view :class="x.warningLevel=='一级'?'level-label-top':'level-label-no-top'">
|
|
</view>
|
<text class="level-name">{{x.warningLevel}}</text>
|
</view>
|
</view>
|
<view class="second">
|
<view class="pos">
|
来自：{{x.pos}}
|
</view>
|
<view class="time">
|
{{x.time}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<bottomDrawer :tips="showActionSheet.tips" :itemList="showActionSheet.itemList" :show="showActionSheet.show"
|
:maskClosable="showActionSheet.maskClosable" :isCancel="showActionSheet.isCancel"
|
@chooseCancel="chooseCancel" @slectDevice="slectDevice"></bottomDrawer>
|
</view>
|
<uni-load-more :status="status"></uni-load-more>
|
</view>
|
</template>
|
|
<script>
|
import bottomDrawer from "@/components/bottomDrawer.vue"
|
// import DB from "@/db.js";
|
|
const g = this
|
export default {
|
data() {
|
return {
|
href: 'https://uniapp.dcloud.io/component/README?id=uniui',
|
searchVal: "",
|
status: 'more',
|
daysArr: [],
|
channelSet: new Set(),
|
showActionSheet: {
|
show: false,
|
maskClosable: true,
|
tips: "请选择申请节点身份，不同的节点消耗福卡不同",
|
itemList: ["全部设备"],
|
color: "#9a9a9a",
|
size: 26,
|
isCancel: true
|
}
|
}
|
},
|
components: {
|
bottomDrawer
|
},
|
mounted() {
|
try {
|
const list = uni.getStorageSync('list');
|
list == '' ? null : this.daysArr = list;
|
const v = uni.getStorageSync("channelSet")
|
this.showActionSheet.itemList = ["全部设备", ...v]
|
this.channelSet = new Set(v)
|
} catch (e) {}
|
// this.$mqtt.subscribe('MIDDOL-TEST')
|
},
|
// mqtt: {
|
// 'MIDDOL-TEST'(data) {
|
// const obj = JSON.parse(data)
|
// const [date, time] = obj.updateTime.split(" ")
|
// console.log("来了一条新的", obj.id)
|
// const toInsert = this.daysArr.find((item) => {
|
// return item.day == date
|
// })
|
// if (toInsert == undefined) {
|
// this.daysArr.push({
|
// day: date,
|
// items: [{
|
// id: obj.id,
|
// time,
|
// date,
|
// pos: obj.cameraAddr,
|
// name: obj.taskName,
|
// warningLevel: obj.alarmRules[0].alarmLevel,
|
// imgUrl: obj.picMaxUrl[0]
|
// }]
|
// })
|
// } else {
|
// toInsert.items.unshift({
|
// id: obj.id,
|
// time,
|
// date,
|
// pos: obj.cameraAddr,
|
// name: obj.taskName,
|
// warningLevel: obj.alarmRules[0].alarmLevel,
|
// imgUrl: obj.picMaxUrl[0]
|
// })
|
// }
|
|
// if (!this.channelSet.has(obj.cameraAddr)) {
|
// this.channelSet.add(obj.cameraAddr)
|
// }
|
// try {
|
// uni.setStorage("list", this.daysArr);
|
// uni.setStorage("channelSet", [...this.channelSet]);
|
// } catch (e) {
|
// console.log("errrrrr", e)
|
// }
|
|
// }
|
// },
|
methods: {
|
goFrontPage() {
|
uni.navigateTo({
|
url: 'pages/index/index'
|
})
|
},
|
goToSetting() {
|
uni.navigateTo({
|
url: '../setting/setting'
|
})
|
},
|
getLevel(level) {
|
switch (level) {
|
case 1:
|
return "一级"
|
case 2:
|
return "二级"
|
case 3:
|
return "三级"
|
case 4:
|
return "四级"
|
default:
|
break;
|
}
|
},
|
// 点击弹窗
|
showAllChannel() {
|
// const v = uni.getStorageSync('channelSet')
|
this.showActionSheet.show = true;
|
this.showActionSheet.itemList = ["全部设备", ...this.channelSet]
|
},
|
toSearch() {
|
this.daysArr.forEach((item) => {
|
item.items = item.items.filter((x) => {
|
return x.pos.includes(this.searchVal.trim()) || x.name.includes(this.searchVal
|
.trim())
|
})
|
})
|
},
|
slectDevice(obj) {
|
console.log("fase", obj.index, )
|
const c = this.showActionSheet.itemList[obj.index]
|
try {
|
this.daysArr = uni.getStorageSync('list')
|
} catch (e) {}
|
if (c == '全部设备') {} else {
|
|
this.daysArr.forEach((item) => {
|
item.items = item.items.filter((x) => {
|
return x.pos == c
|
})
|
})
|
}
|
},
|
// 弹窗关闭
|
chooseCancel() {
|
this.showActionSheet.show = false;
|
},
|
toDetail(x) {
|
x.isRead = true
|
console.log(this.$refs[x.id])
|
// uni.$emit('toDetail',{msg:x})
|
getApp().globalData.curPageDetail = x
|
// console.log(getApp())
|
uni.navigateTo({
|
url: `../detail/detail?id=${x.id}`
|
})
|
},
|
clearInput(val) {
|
console.log("走这里2")
|
try {
|
this.daysArr = uni.getStorageSync('list')
|
console.log("thisssss", this.daysArr);
|
} catch (e) {
|
console.log("errrrrr", e)
|
}
|
},
|
inputMethod(val) {
|
if (val.trim() == "") {
|
console.log("走这里1")
|
try {
|
this.daysArr = uni.getStorageSync('list')
|
console.log("thisssss", this.daysArr);
|
} catch (e) {
|
console.log("errrrrr", e)
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: rgba(243, 244, 246, 1);
|
}
|
|
.container {
|
padding: 0;
|
font-size: 14px;
|
line-height: 24px;
|
}
|
|
.top {
|
width: 100%;
|
background-color: #FFFFFF;
|
|
.top-title {
|
width: 100%;
|
height: 80rpx;
|
position: relative;
|
|
.t {
|
text-align: center;
|
width: 85px;
|
margin: 0 auto;
|
height: 80rpx;
|
line-height: 80rpx;
|
font-size: 32rpx;
|
color: #797979;
|
}
|
|
.select-channel-btn {
|
position: absolute;
|
top: 14rpx;
|
right: 40rpx;
|
|
.down-icon {
|
font-size: 22rpx;
|
margin-left: 4rpx;
|
}
|
}
|
}
|
}
|
|
.day-time {
|
padding: 10px 15px;
|
color: rgba(121, 121, 121, 1);
|
font-size: 28rpx;
|
font-weight: 600;
|
}
|
|
.uni-navbar__content_view {
|
justify-content: center;
|
}
|
|
.banner {
|
background: url(../../static/pic3.jpg) no-repeat center;
|
height: 200rpx;
|
background-size: cover;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
|
.banner-img {
|
margin-left: 40rpx;
|
margin-top: 16rpx;
|
|
uni-image {
|
width: 140rpx;
|
}
|
}
|
|
.title {
|
color: #FFFFFF;
|
height: 70rpx;
|
line-height: 70rpx;
|
font-size: 44rpx;
|
padding-left: 30rpx;
|
text-align: left;
|
}
|
|
.desc {
|
color: #FFFFFF;
|
height: 50rpx;
|
line-height: 50rpx;
|
font-size: 32rpx;
|
text-align: left;
|
margin-left: 30rpx;
|
}
|
}
|
|
.top-title {
|
uni-button[size=mini] {
|
display: inline-block;
|
line-height: 2;
|
font-size: 22rpx;
|
color: rgba(121, 121, 121, 1);
|
padding: 0 .6em;
|
|
}
|
}
|
|
.list-item {
|
display: flex;
|
justify-content: left;
|
padding: 15px 15px;
|
background: #fff;
|
border-bottom: 2px solid #f3f4f6;
|
position: relative;
|
|
.right-desc {
|
.first {
|
display: flex;
|
|
.name {
|
margin-right: 20rpx;
|
min-width: 200rpx;
|
}
|
|
.level {
|
display: flex;
|
align-items: center;
|
|
.level-label-top {
|
width: 20px;
|
height: 14px;
|
background: rgba(255, 0, 0, 1);
|
border-radius: 3px;
|
margin-right: 5px;
|
}
|
|
.level-label-no-top {
|
width: 20px;
|
height: 14px;
|
background: rgba(255, 204, 0, 1);
|
border-radius: 3px;
|
margin-right: 5px;
|
}
|
|
.level-name {
|
color: rgba(121, 121, 121, 1);
|
}
|
}
|
}
|
|
.second {
|
display: flex;
|
justify-content: space-between;
|
|
display: flex;
|
justify-content: space-between;
|
width: 460rpx;
|
|
.pos {
|
font-size: 12rpx;
|
color: rgba(121, 121, 121, 1);
|
}
|
|
.time {
|
font-size: 12rpx;
|
color: rgba(121, 121, 121, 1);
|
}
|
}
|
}
|
}
|
|
.left-img {
|
width: fit-content;
|
display: flex;
|
align-items: center;
|
margin-right: 20rpx;
|
|
uni-image {
|
width: 200rpx;
|
height: 120rpx;
|
}
|
}
|
|
.intro {}
|
|
.tap-btn {
|
width: 100upx;
|
height: 40upx;
|
background-color: red;
|
}
|
|
/deep/ .uni-navbar__header-btns {
|
// width: 300upx;
|
}
|
|
.status_bar {
|
height: var(--status-bar-height);
|
width: 100%;
|
}
|
|
.triangle-topright {
|
width: 0;
|
height: 0;
|
float: right;
|
font-size: xx-small;
|
border-top: 40px solid rgba(255, 102, 51, 1);
|
border-left: 40px solid transparent;
|
position: absolute;
|
right: 0;
|
top: 0;
|
|
.word {
|
text-align: center;
|
margin: auto;
|
position: absolute;
|
display: inline-block;
|
width: 41px;
|
right: 1px;
|
top: -43px;
|
color: #FFF;
|
-webkit-transform-origin: bottom center;
|
transform-origin: bottom center;
|
-webkit-transform: rotate(45deg);
|
transform: rotate(45deg);
|
font-size: 12px;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
}
|
|
}
|
</style>
|
