Android/uni-app-alarmSystem.git

			@@ -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('所有id：：', 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);
			}
			}