App.vue 11 KB

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