From 4885600ecc369aa2e30a65de8dd7a410f13c34df Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期一, 24 五月 2021 11:25:04 +0800
Subject: [PATCH] 解决app通信问题
---
pages/index/index.vue | 281 +++++++++++++++++++++++++++++++++++--------------------
1 files changed, 177 insertions(+), 104 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 50a59c3..c2e94b2 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,9 +1,9 @@
<template>
<view class="container">
- <view class="status_bar">
- </view>
+ <!-- <view class="status_bar">
+ </view> -->
<uni-nav-bar class="header-bar" leftText="棣栭〉" rightIcon="gear" @clickLeft="goFrontPage" fixed="true"
- @clickRight="goToSetting">
+ statusBar="true" @clickRight="goToSetting">
<view class="">
<!-- <uni-easyinput prefixIcon="search" :clearable="true" confirmType="search" v-model="searchVal"
placeholder="鍦烘櫙鍚嶇О 鎽勫儚鏈哄湴鍧�" /> -->
@@ -32,7 +32,8 @@
<view class="t">
鎶ヨ鎻愰啋
</view>
- <button class="select-channel-btn" type="default" size="mini" @click="showAllChannel">鍏ㄩ儴閫氶亾
+ <button class="select-channel-btn" type="default" size="mini"
+ @click="showAllChannel">{{activeChannel}}
<uni-icons class="down-icon" type="arrowdown" size="11"></uni-icons>
</button>
@@ -41,64 +42,87 @@
<view class="total-list">
- <view v-for="(item,index) in daysArr" :key="index">
- <view class="day-time">
+ <!-- <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="'/httpImage/' + x.imgUrl" mode=""></image> -->
+ <image :src="'http://192.168.20.10:7009'+'/httpImage/'+ x.imgUrl" mode="">
+ </image>
</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 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="second">
- <view class="pos">
- 鏉ヨ嚜锛歿{x.pos}}
+ <view class="level">
+ <view :class="x.warningLevel=='涓�绾�'?'level-label-top':'level-label-no-top'">
+
</view>
- <view class="time">
- {{x.time}}
- </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>
+ <!-- <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
+ 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',
- daysArr: [],
- channelSet: new Set(),
+ wList: [],
+ serve: {
+ host: '192.168.20.189',
+ wsport: '1883',
+ path: '/ws',
+ },
+ onTopic: 'MIDDOL-TEST', // this.$mqtt.subscribe('MIDDOL-TEST')
+ Qos: 0,
+ sendMassage: 'Hello EMQ-X锛�',
+ time: 0,
+ client: null,
+ activeChannel: "鍏ㄩ儴璁惧",
+ //MQTT杩炴帴鐨勯厤缃�
+ options: {
+ wsOptions: {},
+ protocolVersion: 4, //MQTT杩炴帴鍗忚鐗堟湰
+ clientId: 'WebClient-' + parseInt(Math.random() * 100000),
+ username: 'admin',
+ password: 'admin123',
+ // reconnectPeriod: 1000, //1000姣锛屼袱娆￠噸鏂拌繛鎺ヤ箣闂寸殑闂撮殧
+ // connectTimeout: 60 * 1000, //1000姣锛屼袱娆￠噸鏂拌繛鎺ヤ箣闂寸殑闂撮殧
+ resubscribe: true //濡傛灉杩炴帴鏂紑骞堕噸鏂拌繛鎺ワ紝鍒欎細鍐嶆鑷姩璁㈤槄宸茶闃呯殑涓婚
+ },
showActionSheet: {
show: false,
maskClosable: true,
@@ -114,25 +138,67 @@
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')
+ // const connectUrl = 'ws://test.mosquitto.org:8080'
+ // const connectUrl = 'wx://test.mosquitto.org:8080'
+ // const client = mqtt.connect(connectUrl, options)
+ // client.on('connect', function(mes) {
+ // // 璁㈤槄
+ // client.subscribe("testtopic");
+ // })
+
+ // client.on('reconnect', (error) => {
+ // console.log('姝ｅ湪閲嶈繛:', error)
+ // })
+
+ // client.on('error', (error) => {
+ // console.log('杩炴帴澶辫触:', error)
+ // })
+
+ // client.on('message', (topic, message) => {
+ // console.log('鏀跺埌娑堟伅锛�', topic, message.toString())
+ // })
+ let _this = this
+ // var hosts = 'ws://' + this.serve.host + ':' + this.serve.wsport + this.serve.path
+ // var hosts = 'wx://192.168.20.189:15675/ws'
+ var hosts = 'ws://192.168.20.189:15675/ws'
+ const c = mqtt.connect(
+ hosts,
+ _this.options
+ );
+ c.on('connect', function() {
+ // console.log('杩炴帴鎴愬姛');
+ c.subscribe(_this.onTopic, {
+ qos: _this.Qos
+ }, function(error) {
+ if (!error) {
+ // console.log('璁㈤槄鎴愬姛');
+ }
+ });
+ });
+ c.on('reconnect', function(error) {
+ console.log("璧拌繖閲�111")
+ });
+ c.on('error', function(error) {
+ uni.hideLoading();
+ });
+ c.on('message', function(topic, message) {
+ const data = message.toString()
+ // console.log('鏀跺埌鏉ヨ嚜' + topic + '鐨勬秷鎭�' + JSON.parse(data).id);
+ _this.handleMsg(data)
+ });
+
+ // _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) => {
+ // const toInsert = this.wList.find((item) => {
// return item.day == date
// })
// if (toInsert == undefined) {
- // this.daysArr.push({
+ // this.wList.push({
// day: date,
// items: [{
// id: obj.id,
@@ -160,7 +226,7 @@
// this.channelSet.add(obj.cameraAddr)
// }
// try {
- // uni.setStorage("list", this.daysArr);
+ // uni.setStorage("list", this.wList);
// uni.setStorage("channelSet", [...this.channelSet]);
// } catch (e) {
// console.log("errrrrr", e)
@@ -168,7 +234,40 @@
// }
// },
+ onShow() {
+ this.pullData()
+ },
methods: {
+ pullData(l, v) {
+ DB.selectTableData('warning_list', l, v).then((res) => {
+ this.wList = res
+ }, e => {
+ console.log(6677, e)
+ })
+ },
+ handleMsg(data) {
+ const obj = JSON.parse(data)
+ const [date, time] = obj.updateTime.split(" ")
+ const t = new Date(obj.updateTime)
+ 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('鎴愬姛鎻掑叆涓�鏉℃暟鎹�')
+ }, () => {
+ console.log('鎻掑叆涓�鏉℃暟鎹け璐�')
+ })
+ if (this.activeChannel == '鍏ㄩ儴璁惧' || this.activeChannel == obj.cameraAddr) {
+ this.wList.unshift({
+ id: obj.id,
+ time,
+ date,
+ pos: obj.cameraAddr,
+ name: obj.taskName,
+ warningLevel: obj.alarmRules[0].alarmLevel,
+ imgUrl: obj.picMaxUrl[0]
+ })
+ }
+ },
goFrontPage() {
uni.navigateTo({
url: 'pages/index/index'
@@ -179,81 +278,54 @@
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]
+ 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('鎵�鏈塱d锛氾細', e)
+ },
+ fail(e) {
+ console.log('鍑洪敊浜�', e)
+ }
+ })
},
toSearch() {
- this.daysArr.forEach((item) => {
- item.items = item.items.filter((x) => {
- return x.pos.includes(this.searchVal.trim()) || x.name.includes(this.searchVal
- .trim())
- })
+ const s = this.searchVal.trim()
+ this.wList = this.wList.filter((x) => {
+ return x.pos.includes(s) || x.name.includes(s)
})
},
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
- })
- })
- }
+ this.activeChannel = c
+ c === '鍏ㄩ儴璁惧' ? this.pullData() : this.pullData('pos', c)
},
// 寮圭獥鍏抽棴
chooseCancel() {
this.showActionSheet.show = false;
},
toDetail(x) {
- x.isRead = true
- console.log(this.$refs[x.id])
- // uni.$emit('toDetail',{msg:x})
+ DB.updateTableData("warning_list", 'isRead', 1, 'id', x.id)
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)
- }
+ this.activeChannel == '鍏ㄩ儴璁惧' ? this.pullData() : this.pullData('pos', this.activeChannel)
},
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)
- }
+ this.activeChannel == '鍏ㄩ儴璁惧' ? this.pullData() : this.pullData('pos', this.activeChannel)
}
}
}
@@ -282,7 +354,7 @@
.t {
text-align: center;
- width: 85px;
+ width: 200rpx;
margin: 0 auto;
height: 80rpx;
line-height: 80rpx;
@@ -292,12 +364,12 @@
.select-channel-btn {
position: absolute;
- top: 14rpx;
+ top: 16rpx;
right: 40rpx;
.down-icon {
- font-size: 22rpx;
- margin-left: 4rpx;
+ font-size: 24rpx;
+ margin-left: 6rpx;
}
}
}
@@ -376,6 +448,7 @@
.name {
margin-right: 20rpx;
min-width: 200rpx;
+ font-size: 30rpx;
}
.level {
@@ -413,12 +486,12 @@
width: 460rpx;
.pos {
- font-size: 12rpx;
+ font-size: 22rpx;
color: rgba(121, 121, 121, 1);
}
.time {
- font-size: 12rpx;
+ font-size: 22rpx;
color: rgba(121, 121, 121, 1);
}
}
--
Gitblit v1.8.0