<template>
|
<view class="container">
|
<!-- <view class="status_bar">
|
</view> -->
|
<uni-nav-bar class="header-bar" leftText="首页" rightIcon="gear" @clickLeft="goFrontPage" fixed="true"
|
statusBar="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">{{activeChannel}}
|
<uni-icons class="down-icon" type="arrowdown" size="11"></uni-icons>
|
</button>
|
|
</view>
|
</view>
|
|
|
<view class="total-list">
|
<!-- <view v-for="(item,index) in wList" :key="index"> -->
|
<!-- <view class="day-time">
|
{{item.day}}
|
</view> -->
|
<view class="list-item" v-for="(x,i) in wList" @tap="toDetail(x)">
|
<view class="left-img">
|
<image :src="'http://'+ getResourceUrl() +'/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.date}} {{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";
|
import mqtt from '../../utils/mqtt.min.js';
|
// import mqtt from 'mqtt'
|
import DB from '@/db.js'
|
export default {
|
data() {
|
return {
|
href: 'https://uniapp.dcloud.io/component/README?id=uniui',
|
searchVal: "",
|
status: 'more',
|
wList: [],
|
serve: {
|
host: '192.168.20.189',
|
wsport: '1883',
|
path: '/ws',
|
},
|
onTopic: 'MIDDOL-TEST',
|
Qos: 0,
|
sendMassage: 'Hello EMQ-X！',
|
time: 0,
|
client: null,
|
activeChannel: "全部设备",
|
//MQTT连接的配置
|
// clientId: 'WebClient-' + parseInt(Math.random() * 100000),
|
// username: 'admin',
|
// password: 'admin123',
|
// useSSL: false,
|
// mqttVersion: 4,
|
// timeout: 3
|
|
options: {
|
wsOptions: {},
|
protocolVersion: 4, //MQTT连接协议版本
|
clientId: 'WebClient-' + parseInt(Math.random() * 100000),
|
username: 'admin',
|
password: 'admin123',
|
keepalive: 60,
|
reconnectPeriod: 100,
|
// reconnectPeriod: 1000, //1000毫秒，两次重新连接之间的间隔
|
connectTimeout: 60 * 1000, //1000毫秒，两次重新连接之间的间隔
|
resubscribe: true //如果连接断开并重新连接，则会再次自动订阅已订阅的主题
|
},
|
showActionSheet: {
|
show: false,
|
maskClosable: true,
|
tips: "请选择申请节点身份，不同的节点消耗福卡不同",
|
itemList: ["全部设备"],
|
color: "#9a9a9a",
|
size: 26,
|
isCancel: true
|
}
|
}
|
},
|
components: {
|
bottomDrawer
|
},
|
mounted() {
|
this.connectAndSubscribe('ws://' + getApp().globalData.mqUrl + '/ws')
|
// _this.$mqtt.subscribe('MIDDOL-TEST')
|
this.listenIPChange()
|
},
|
// mqtt: {
|
// 'MIDDOL-TEST'(data) {
|
// const obj = JSON.parse(data)
|
// const [date, time] = obj.updateTime.split(" ")
|
// console.log("来了一条新的", obj.id)
|
// const toInsert = this.wList.find((item) => {
|
// return item.day == date
|
// })
|
// if (toInsert == undefined) {
|
// this.wList.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.wList);
|
// uni.setStorage("channelSet", [...this.channelSet]);
|
// } catch (e) {
|
// console.log("errrrrr", e)
|
// }
|
|
// }
|
// },
|
onShow() {
|
this.pullData()
|
},
|
methods: {
|
listenIPChange() {
|
uni.$on('changeClientIP', (data) => {
|
this.disconnect()
|
this.connectAndSubscribe(`ws://${data.host}/ws`)
|
getApp().globalData.mqUrl = data.host
|
uni.$emit("connectStatus", {
|
status: this.client.connected
|
})
|
})
|
},
|
pullData(l, v) {
|
DB.selectTableData('warning_list', l, v).then((res) => {
|
this.wList = res
|
}, e => {
|
console.log(6677, e)
|
})
|
},
|
connectAndSubscribe(hosts) {
|
let _this = this
|
console.log(hosts)
|
this.client = mqtt.connect(
|
hosts,
|
_this.options
|
);
|
this.client.on('connect', function() {
|
console.log('连接成功');
|
_this.client.subscribe(_this.onTopic, {
|
qos: _this.Qos
|
}, function(error) {
|
if (!error) {
|
console.log('订阅成功');
|
}
|
});
|
});
|
this.client.on('reconnect', function(error) {
|
console.log("走这里111")
|
});
|
this.client.on('error', function(error) {
|
console.log("连接失败")
|
});
|
this.client.on('message', function(topic, message) {
|
console.log('新增一条数据')
|
const data = message.toString()
|
_this.handleMsg(data)
|
});
|
},
|
getResourceUrl() {
|
return getApp().globalData.resourseUrl
|
},
|
disconnect() {
|
if (!this.client || !this.client.connected) {
|
console.log('客户端未连接')
|
return;
|
}
|
this.client.end();
|
this.client = null
|
console.log('已断开连接');
|
},
|
handleMsg(data) {
|
const obj = JSON.parse(data)
|
let [date, time] = obj.picDate.split(" ")
|
time = time.substring(0, time.length - 4);
|
const t = new Date(obj.picDate)
|
DB.insertTableData('warning_list',
|
`'${obj.id}', '${time}', '${date}', '${obj.cameraAddr}', '${obj.taskName}', '${obj.alarmRules[0].alarmLevel}', '${obj.picMaxUrl[0]}','${t.getTime()}', 0`
|
).then(() => {
|
console.log('成功插入一条数据')
|
if (this.activeChannel == '全部设备' || this.activeChannel == obj.cameraAddr) {
|
if (this.wList.find(function(item) {
|
return item.id == obj.id
|
}) == undefined) {
|
this.wList.unshift({
|
id: obj.id,
|
time,
|
date,
|
pos: obj.cameraAddr,
|
name: obj.taskName,
|
warningLevel: obj.alarmRules[0].alarmLevel,
|
imgUrl: obj.picMaxUrl[0]
|
})
|
}
|
}
|
}, () => {
|
console.log('插入一条数据失败')
|
})
|
|
},
|
goFrontPage() {
|
uni.navigateTo({
|
url: 'pages/index/index'
|
})
|
},
|
goToSetting() {
|
uni.navigateTo({
|
url: '../setting/setting'
|
})
|
},
|
// 点击弹窗
|
showAllChannel() {
|
this.showActionSheet.show = true;
|
this.showActionSheet.itemList = ['全部设备']
|
DB.getDistinctVal('warning_list', 'pos').then((res) => {
|
res.forEach((obj) => {
|
this.showActionSheet.itemList.push(obj.pos)
|
})
|
})
|
plus.sqlite.selectSql({
|
name: "warns",
|
sql: 'select id from warning_list',
|
success(e) {
|
console.log('所有id', e);
|
},
|
fail(e) {
|
console.log('失败所有id', e);
|
}
|
})
|
},
|
toSearch() {
|
const s = this.searchVal.trim()
|
this.wList = this.wList.filter((x) => {
|
return x.pos.includes(s) || x.name.includes(s)
|
})
|
},
|
slectDevice(obj) {
|
const c = this.showActionSheet.itemList[obj.index]
|
this.activeChannel = c
|
c === '全部设备' ? this.pullData() : this.pullData('pos', c)
|
},
|
// 弹窗关闭
|
chooseCancel() {
|
this.showActionSheet.show = false;
|
},
|
toDetail(x) {
|
DB.updateTableData("warning_list", 'isRead', 1, 'id', x.id)
|
getApp().globalData.curPageDetail = x
|
uni.navigateTo({
|
url: `../detail/detail?id=${x.id}`
|
})
|
},
|
clearInput(val) {
|
this.activeChannel == '全部设备' ? this.pullData() : this.pullData('pos', this.activeChannel)
|
},
|
inputMethod(val) {
|
if (val.trim() == "") {
|
this.activeChannel == '全部设备' ? this.pullData() : this.pullData('pos', this.activeChannel)
|
}
|
}
|
}
|
}
|
</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: 200rpx;
|
margin: 0 auto;
|
height: 80rpx;
|
line-height: 80rpx;
|
font-size: 32rpx;
|
color: #797979;
|
}
|
|
.select-channel-btn {
|
position: absolute;
|
top: 16rpx;
|
right: 40rpx;
|
|
.down-icon {
|
font-size: 24rpx;
|
margin-left: 6rpx;
|
}
|
}
|
}
|
}
|
|
.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;
|
font-size: 30rpx;
|
}
|
|
.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: 22rpx;
|
color: rgba(121, 121, 121, 1);
|
}
|
|
.time {
|
font-size: 22rpx;
|
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>
|
