App.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. <script>
  2. import $mqtt from '@/utils/mqtt.min.js';
  3. import { config } from '@/api/request/config.js'
  4. export default {
  5. onLaunch: function() {
  6. console.log('App Launch')
  7. //获取openid
  8. uni.login({
  9. success(loginRes) {
  10. console.log('获取code成功');
  11. uni.setStorageSync('code', loginRes.code);
  12. }
  13. })
  14. //小程序热更新
  15. if (wx.canIUse('getUpdateManager')) {
  16. const updateManager = wx.getUpdateManager()
  17. updateManager.onCheckForUpdate(function (res) {
  18. if (res.hasUpdate) {
  19. updateManager.onUpdateReady(function () {
  20. wx.showModal({
  21. title: '更新提示',
  22. content: '新版本已经准备好,是否重启应用?',
  23. success: function (res) {
  24. if (res.confirm) {
  25. updateManager.applyUpdate()
  26. }
  27. }
  28. })
  29. })
  30. updateManager.onUpdateFailed(function () {
  31. wx.showModal({
  32. title: '已经有新版本了哟~',
  33. content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~'
  34. })
  35. })
  36. }
  37. })
  38. } else {
  39. wx.showModal({
  40. title: '提示',
  41. content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
  42. })
  43. }
  44. },
  45. onShow: function() {
  46. // this.onMQTT();
  47. console.log('App Show')
  48. },
  49. onHide: function() {
  50. // this.offMQTT();
  51. console.log('App Hide')
  52. },
  53. data(){
  54. return{
  55. //MQTT数据
  56. client:{},
  57. //MQTT请求参数
  58. mtopicBigview:"lab/bigview",
  59. mtopicFunction:"lab/function/data",
  60. mtopicHardware:"lab/hardware/data",
  61. mtopicLine:"lab/riskPlan/trigger/notice",
  62. //监听数据
  63. watchObj:{},
  64. //当前通道数组
  65. mqttIdList:[],
  66. }
  67. },
  68. globalData:{
  69. mqttAlarmData:{},
  70. mqttSensorData:{},
  71. mqttDeviceData:{},
  72. warnData:{},
  73. lineData:{},
  74. mqttfireData:{},//灭火传感器状态异常
  75. mqttOnlineData:{},//设备是否在线
  76. mqttPerformData:{},//是否正在执行灭火操作
  77. },
  78. methods: {
  79. //删除报警监听
  80. delWarnData(){
  81. delete this.watchObj.warnData;
  82. },
  83. //删除报警监听
  84. deleteAlarmWatch(){
  85. delete this.watchObj.mqttAlarmData;
  86. },
  87. //删除传感器监听
  88. deleteSensorWatch(){
  89. delete this.watchObj.mqttSensorData;
  90. },
  91. //删除设备监听
  92. deleteDeviceWatch(){
  93. delete this.watchObj.mqttDeviceData;
  94. },
  95. //删除应急监听
  96. deleteLineData(){
  97. delete this.watchObj.lineData;
  98. },
  99. //删除一键灭火-传感器状态
  100. deletefireData(){
  101. delete this.watchObj.mqttfireData;
  102. },
  103. //删除一键灭火-设备是否在线
  104. deleteOnlineData(){
  105. delete this.watchObj.mqttOnlineData;
  106. },
  107. //删除一键灭火-是否正在执行灭火
  108. deletePerformData(){
  109. delete this.watchObj.mqttPerformData;
  110. },
  111. //监听对应的mqtt数据
  112. watch:function(method,istr){
  113. this.watchObj = this.globalData;
  114. Object.defineProperty(this.watchObj,istr,{
  115. configurable:true,
  116. enumerable:true,
  117. immediate: true,
  118. deep: true,
  119. set:function(value){
  120. this._consumerGoodsStatus=value
  121. method(value)
  122. },
  123. get:function(value){
  124. return this._consumerGoodsStatus
  125. }
  126. })
  127. },
  128. // 子页面调用
  129. appMqttOn(type,list){
  130. let self = this;
  131. if(this.mqttIdList){
  132. this.offMQTT();
  133. }
  134. uni.setStorageSync('mqttIdList',JSON.stringify(list));
  135. this.mqttIdList = list;
  136. setTimeout(function(){
  137. self.subscriptionMQTT();
  138. },100);
  139. },
  140. //MQTT订阅
  141. subscriptionMQTT(){
  142. let self = this;
  143. const mqttOptions = {
  144. keepalive: 30,
  145. clean: true,//保留会话
  146. connectTimeout: 5000, // 超时时间
  147. reconnectPeriod:5000, // 重连间隔
  148. clientId: uni.getStorageSync('token')+'lab/function/data',
  149. username: uni.getStorageSync('mqttUser'),
  150. password: uni.getStorageSync('mqttPassword'),
  151. }
  152. const connectUrl = uni.getStorageSync('mqttUrl');
  153. // this.client = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
  154. this.client = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
  155. this.client.on('connect', () => {
  156. // 这是为了给自己发条消息,其它无作用
  157. for(let i=0;i<self.mqttIdList.length;i++){
  158. if(self.mqttIdList[i].type == 'lab/function/data'){
  159. //传感器
  160. for(let o=0;o<self.mqttIdList[i].idList.length;o++){
  161. self.client.subscribe(self.mqttIdList[i].type+self.mqttIdList[i].idList[o], (err) => {
  162. if (!err) {
  163. console.log("传感器信息订阅成功",self.mqttIdList[i].type+self.mqttIdList[i].idList[o])
  164. }
  165. });
  166. }
  167. }else if(self.mqttIdList[i].type == 'lab/hardware/data'){
  168. //传感器
  169. for(let o=0;o<self.mqttIdList[i].idList.length;o++){
  170. self.client.subscribe(self.mqttIdList[i].type+self.mqttIdList[i].idList[o], (err) => {
  171. if (!err) {
  172. console.log("硬件订阅成功",self.mqttIdList[i].type+self.mqttIdList[i].idList[o])
  173. }
  174. });
  175. }
  176. }else if(self.mqttIdList[i].type == 'lab/bigview'){
  177. self.client.subscribe(self.mqttIdList[i].type, (err) => {
  178. if (!err) {
  179. console.log("报警信息订阅成功",self.mqttIdList[i].type)
  180. }
  181. });
  182. }else if(self.mqttIdList[i].type == 'lab/riskPlan/trigger/notice'){
  183. self.client.subscribe(self.mqttIdList[i].type, (err) => {
  184. if (!err) {
  185. console.log("应急疏散订阅成功",self.mqttIdList[i].type)
  186. }
  187. });
  188. }else if(self.mqttIdList[i].type == 'lab/fireDevice/Warn/'){
  189. self.client.subscribe(self.mqttIdList[i].type+self.mqttIdList[i].fireCode, (err) => {
  190. if (!err) {
  191. console.log("火灾传感器状态-订阅成功",self.mqttIdList[i].type+self.mqttIdList[i].fireCode)
  192. }
  193. });
  194. }else if(self.mqttIdList[i].type == 'lab/fireDevice/isOnline/'){
  195. self.client.subscribe(self.mqttIdList[i].type+self.mqttIdList[i].fireCode, (err) => {
  196. if (!err) {
  197. console.log("火灾设备是否在线-订阅成功",self.mqttIdList[i].type+self.mqttIdList[i].fireCode)
  198. }
  199. });
  200. }else if(self.mqttIdList[i].type == 'lab/fireDevice/executing/'){
  201. self.client.subscribe(self.mqttIdList[i].type+self.mqttIdList[i].fireCode, (err) => {
  202. if (!err) {
  203. console.log("火灾是否正在执行灭火操作-订阅成功:",self.mqttIdList[i].type+self.mqttIdList[i].fireCode)
  204. }
  205. });
  206. }
  207. }
  208. });
  209. // 自动重连
  210. this.client.on('reconnect', (msg) => {
  211. console.log('自动重连-reconnect-1', msg)
  212. });
  213. // 错误
  214. this.client.on('error', () => {
  215. console.log('错误-error-1')
  216. });
  217. // 断开
  218. this.client.on('end', () => {
  219. console.log('断开-end-1')
  220. });
  221. // 掉线
  222. this.client.on('offline', (msg) => {
  223. console.log('掉线-offline-1',msg)
  224. });
  225. // 收到消息
  226. this.client.on('message', (topic, message) => {
  227. let data = JSON.parse(message)
  228. //console.log('消息message',data);
  229. if(data){
  230. if(topic == 'lab/riskPlan/trigger/notice'){
  231. // console.log("应急",data);
  232. this.globalData.lineData = data.data;
  233. }else if(topic.search("lab/fireDevice/Warn/") != -1){
  234. console.log("一键灭火-传感器状态",data);
  235. this.globalData.mqttfireData = data;
  236. }else if(topic.search("lab/fireDevice/isOnline/") != -1){
  237. console.log("一键灭火-设备是否在线",data);
  238. this.globalData.mqttOnlineData = data;
  239. }else if(topic.search("lab/fireDevice/executing/") != -1){
  240. console.log("一键灭火-是否正在执行灭火",data);
  241. this.globalData.mqttPerformData = data;
  242. }else if(topic == 'lab/bigview'){
  243. // console.log("报警",data);
  244. if(data.data == 'SUB_RISKPLAN_GROUP'){
  245. this.globalData.mqttAlarmData = data.data;
  246. }
  247. }else {
  248. if(data.data.subId){
  249. // console.log('传感器',data);
  250. this.globalData.mqttSensorData = data.data;
  251. }else{
  252. // console.log("设备开关",data);
  253. this.globalData.mqttDeviceData = data.data;
  254. }
  255. }
  256. }
  257. })
  258. // 全局监听是否有关闭mqtt的消息的事件
  259. uni.$on('closeMqtt',() => {
  260. this.client.end(true); // 主动断开连接
  261. })
  262. },
  263. //取消订阅关闭MQTT连接
  264. offMQTT(){
  265. let self = this;
  266. if(self.mqttIdList[0]){
  267. uni.removeStorageSync('mqttIdList')
  268. for(let i=0;i<self.mqttIdList.length;i++){
  269. if(self.mqttIdList[i].type == 'lab/function/data'){
  270. //断开传感器
  271. for(let o=0;o<self.mqttIdList[i].idList.length;o++){
  272. self.client.unsubscribe(self.mqttIdList[i].type+self.mqttIdList[i].idList[o], error => {
  273. if (error) {
  274. console.log('Unsubscribe error mtopicBigview', error)
  275. }
  276. })
  277. }
  278. }else if(self.mqttIdList[i].type == 'lab/hardware/data'){
  279. //断开硬件
  280. for(let o=0;o<self.mqttIdList[i].idList.length;o++){
  281. self.client.unsubscribe(self.mqttIdList[i].type+self.mqttIdList[i].idList[o], error => {
  282. if (error) {
  283. console.log('Unsubscribe error mtopicBigview', error)
  284. }
  285. })
  286. }
  287. }else if(self.mqttIdList[i].type == 'lab/bigview'){
  288. //断开报警
  289. self.client.unsubscribe(self.mqttIdList[i].type, error => {
  290. if (error) {
  291. console.log('Unsubscribe error mtopicBigview', error)
  292. }
  293. })
  294. }else if(self.mqttIdList[i].type == 'lab/riskPlan/trigger/notice'){
  295. //断开疏散
  296. self.client.unsubscribe(self.mqttIdList[i].type, error => {
  297. if (error) {
  298. console.log('Unsubscribe error mtopicBigview', error)
  299. }
  300. })
  301. }
  302. }
  303. this.client.end(true);
  304. this.client = null;
  305. this.mqttIdList = [];
  306. }
  307. },
  308. }
  309. }
  310. </script>
  311. <style lang="stylus">
  312. page{
  313. height:100%;
  314. width:100%;
  315. background:#f5f5f5;
  316. font-family: PingFang SC;
  317. font-weight: 400;
  318. font-size:30rpx;
  319. color:#333;
  320. }
  321. img{
  322. margin:0;
  323. padding:0;
  324. display:block;
  325. }
  326. .name-box-p{
  327. display block
  328. overflow:hidden;
  329. text-overflow:ellipsis;
  330. white-space:nowrap;
  331. }
  332. view{
  333. margin:0;
  334. padding:0;
  335. }
  336. /*每个页面公共css */
  337. @import './styles/index.styl'
  338. </style>