fix:小程序分享功能和秒级数据

quanyawei

2023-11-01 66d2c8d8c97e19fdbd969f97dd3d6a28f27c415f

 pages/actionChange/secondLevelData/index.vue

@@ -1,31 +1,44 @@
<template>
   <view class="rootBg">
      <view class="">
         <view class="ridoa">
         <view class="ridoaBox">
            <u-radio-group v-model="value" placement="row" :size='radioOption.size'
               :labelColor='radioOption.labelColor' :labelSize='radioOption.labelSize' @change='changeSearchType'>
               <u-radio activeColor="#19be6b" label="通过站点查询" name="0" :labelSize='radioOption.labelSize'
               <u-radio activeColor="#19be6b" label="Mac号询" name="1" :labelSize='radioOption.labelSize'
                  :labelColor='radioOption.labelColor'></u-radio>
               <u-radio activeColor="#19be6b" label="通过设查号询" name="1" :labelSize='radioOption.labelSize'
               <u-radio activeColor="#19be6b" label="站点查询" name="0" :labelSize='radioOption.labelSize'
                  :labelColor='radioOption.labelColor'></u-radio>
               <u-radio activeColor="#19be6b" label="特殊设备查询" name="2" :labelSize='radioOption.labelSize'
                  :labelColor='radioOption.labelColor'></u-radio>
            </u-radio-group>
         </view>
         <view class="" v-if="value==='1'">
            <u-input placeholder="请输入Mac号" :placeholderStyle='placeholderStyle' color="#fff" v-model='macName'>
            <u-input placeholder="请输入Mac号" :placeholderStyle='placeholderStyle' color="#fff"
               customStyle="margin: 0 5px;" v-model='macName'>
               <template slot="suffix">
                  <u-button @tap="searchMacList" text="查询" type="success" size="small"></u-button>
               </template>
            </u-input>
         </view>
         <view class="" v-else>
         <view class="orgSearch" v-else-if="value==='0'">
            <u-form ref="uForm" label-width="80" :model="form">
               <u-form-item border-bottom @click="showeEscalationTime = true ;hideKeyboard('orgName','orgId')">
                  <u-input v-model="form.orgName" disabled disabled-color="#ffffff" placeholder="请选择组织"
                     type="select" />
                  <u-input v-model="form.orgName" disabled disabled-color="#ffffff" customStyle="margin: 0 5px;"
                     placeholder="请选择组织" type="select" />
               </u-form-item>
               <u-form-item border-bottom @click="selectSite">
                  <u-input v-model="form.siteName" disabled disabled-color="#ffffff" placeholder="请选择站点"
                     type="select" />
                  <u-input v-model="form.siteName" disabled disabled-color="#ffffff" customStyle="margin: 0 5px;"
                     placeholder="请选择站点" type="select" />
               </u-form-item>
            </u-form>
            <u-picker :show="showeEscalationTime" :columns="columns" @confirm="selectBack" keyName="name"
               @cancel="showeEscalationTime = false"></u-picker>
         </view>
         <view class="" v-else-if="value==='2'">
            <u-form ref="uForm" label-width="80" :model="form">
               <u-form-item border-bottom @click="selecSpecial">
                  <u-input v-model="form.specialName" disabled disabled-color="#ffffff"
                     customStyle="margin: 0 5px;" placeholder="请选择设备" type="select" />
               </u-form-item>
            </u-form>
            <u-picker :show="showeEscalationTime" :columns="columns" @confirm="selectBack" keyName="name"
@@ -55,9 +68,11 @@
      <u-toast ref="uToast"></u-toast>
      <u-modal :show="showModel" title='请选择Mac号' showCancelButton @cancel='showModel=false' @confirm='selectMac'>
         <view class="slot-content">
            <u-radio-group v-model="modeleMacSelect" iconPlacement="right" placement='column' borderBottom='true'>
            <u-radio-group v-model="modeleMacSelect" iconPlacement="right" placement='column' borderBottom='true'
               @change='clickMac'>
               <view v-for="(item,index) in macList" :key="index" class="ridioBox">
                  <u-radio activeColor="#19be6b" :label="item.mac" :name="item.mac"></u-radio>
                  <u-radio activeColor="#19be6b" :label="`${item.typeName}: ${item.mac}`"
                     :name="item.mac"></u-radio>
               </view>
            </u-radio-group>
         </view>
@@ -71,7 +86,7 @@
      data() {
         return {
            modeleMacSelect: '',
            value: '0',
            value: '1',
            showModel: false,
            showeEscalationTime: false,
            columns: [],
@@ -79,7 +94,9 @@
               orgName: '',
               orgId: '',
               siteName: '',
               siteId: ''
               siteId: '',
               specialName: '',
               specialid: ''
            },
            selectForm: {
               name: '',
@@ -89,7 +106,7 @@
            radioOption: {
               size: '20px',
               labelColor: '#fff',
               labelSize: '18px'
               labelSize: '18px',
            },
            placeholderStyle: 'color: #fff',
            macName: '',
@@ -111,7 +128,8 @@
            // 报警圆环图片
            alarmBg: {},
            timer: '',
            isLoading: true
            isLoading: true,
            specialType: '3'
         }
      },
      filters: {
@@ -124,14 +142,13 @@
      computed: {
         windDirData() {
            if (this.wsData2) {
               console.log('this.windDir', this.windDir)
               return `${this.windDir} (${this.wsData2.a01008})`
            } else {
               return ''
            }
         },
         showData() {
            return [...this.defaultMonitorItems, ...this.coreMonitorItems]
            return [...this.coreMonitorItems, ...this.defaultMonitorItems]
         }
      },
      created() {
@@ -144,6 +161,10 @@
         that.timer = ''
      },
      methods: {
         clickMac(e) {
            this.specialType = this.macList.find(item => item.mac === e).specialType
            console.log('specialType', this.specialType)
         },
         getData() {
            this.queryAlarmByMac()
            this.getHourlyAqi()
@@ -151,12 +172,18 @@
         },
         changeSearchType() {
            this.macName = ''
            if (this.value === '2') {
               this.getSpeciallist()
            }
            if (this.value === '0') {
               this.getOrgs()
            }
         },
         selectMac() {
            this.macName = this.modeleMacSelect
            this.showModel = false
            if (this.socketTask) {
               this.socketTask.onClose()
               this.socketTask.close()
            }
            this.getData()
         },
@@ -164,9 +191,12 @@
            this.$http.httpGet('/AppDevice/fuzzySearch', {
               mac: this.macName
            }).then(res => {
               this.showModel = true
               if (res.data && res.data.length > 10) {
                  this.macList = res.data.slice(0, 10)
               this.macList = []
               if (res.data && res.data.length > 0) {
                  this.macList = res.data
                  this.showModel = true
               } else {
                  uni.$u.toast('暂无数据')
               }
            }).catch(res => {
               uni.$u.toast(res)
@@ -186,12 +216,18 @@
                  this.getSites()
            }
         },
         selecSpecial() {
            this.selectForm = {
               name: 'specialName',
               id: 'specialId'
            }
            this.showeEscalationTime = true
         },
         hideKeyboard(name, id) {
            this.selectForm = {
               'name': name,
               'id': id
            }
            this.getOrgs()
         },
         selectBack(e) {
            if (this.selectForm.name === 'orgName') {
@@ -204,12 +240,13 @@
            } else {
               this.macName = e.value[0].mac
               if (this.socketTask) {
                  this.socketTask.onClose()
                  this.socketTask.close()
               }
               this.getData()
            }
            this.form[this.selectForm.name] = e.value[0].name
            this.form[this.selectForm.id] = e.value[0].id
            this.specialType = e.value[0].specialType
            this.showeEscalationTime = false
         },
         getOrgs() {
@@ -222,16 +259,14 @@
         },
         getSites() {
            let params = {
               organizationId: this.form.orgId
               monitorPointId: this.form.orgId
            }
            this.$http.httpGet('/AppDevice/selectDevice', params).then(res => {
               console.log(res)
               this.columns = []
               this.columns.push(res.data)
               this.showeEscalationTime = true
            }).catch(res => {
               uni.$u.toast(res)
               console.log(res)
            })
         },
         sensorLayout() {
@@ -245,8 +280,21 @@
               this.fixedMonitorItems = res.data.fixedMonitorItems
               this.totalArray.push(...this.coreMonitorItems, ...this.defaultMonitorItems, ...this
                  .fixedMonitorItems)
               this.getSensorMonthAvg()
               this.connectSocket()
               if (this.chartSensorKey.length > 0) {
                  this.getSensorMonthAvg()
                  this.connectSocket()
               } else {
                  uni.$u.toast('暂无数据')
               }
            }).catch(res => {
               uni.$u.toast(res)
            })
         },
         // 特殊设备列表
         getSpeciallist() {
            this.$http.httpGet('/AppDevice/specialDevice').then(res => {
               this.columns = []
               this.columns.push(res.data)
            }).catch(res => {
               uni.$u.toast(res)
               console.log(res)
@@ -418,8 +466,6 @@
                     this.totalArray[i].alarm = this.alarmProgress[key]
                  }
               }
               console.log('this.totalArray', this.totalArray)
               console.log('this.alarmColour', this.alarmColour)
               for (const key in this.alarmColour) {
                  if (this.totalArray[i].sensorCode === key) {
                     this.totalArray[i].colour = this.alarmColour[key]
@@ -434,15 +480,18 @@
         },
         //连接websocket
         connectSocket() {
            if (!this.isLoading) {
            if (this.socketTask) {
               this.socketTask.close()
               this.socketTask = null
            }
            this.baseUrl = this.$storage.get('baseUrl')
            let that = this
            let socketUrl = this.baseUrl + '/singleDevice/' + this.macName
            if (this.specialType === '0') {
               socketUrl = this.baseUrl + '/cruiserWebsocket/' + this.macName
            }
            socketUrl = socketUrl.replace('https', 'wss').replace('http', 'ws')
            console.log('调用连接websocket')
            console.log('调用连接websocket', socketUrl)
            this.socketTask = uni.connectSocket({
               url: socketUrl,
               success(res) {
@@ -463,77 +512,16 @@
               console.log('收到服务器内容：' + res.data)
               that.handlerMsg(res) //这里是对获取到的数据进行操作
            })
            this.socketTask.onError(function(res) {
               console.log('WebSocket连接打开失败，请检查！')
               console.log(res)
               // this.isSuccess = false
               // that.connectSocket()
               //进入重新连接
               that.reconnect()
            })
            // // 监听连接关闭 -
            this.socketTask.onClose(e => {
               console.log('WebSocket连接关闭！')
               clearInterval(that.timer)
               that.timer = ''
               if (!that.isClose) {
                  that.reconnect()
               }
            })
            console.log(this.socketTask)
         },
         //进入重新连接
         reconnect() {
            console.log('进入断线重连')
            this.socketTask.close()
            this.socketTask = null
            if (this.isLoading) {
               this.connectSocket()
            }
         },
         //发送消息
         sendSocketMessage(msg) {
            console.log('发送信息')
            console.log(msg)
            return new Promise((reslove, reject) => {
               this.socketTask.send({
                  data: msg,
                  success(res) {
                     console.log('发送成功')
                     reslove(res)
                  },
                  fail(res) {
                     console.log('发送失败')
                     console.log(res)
                     reject(res)
                  }
               })
            })
         },
         //心跳
         heart() {
            let that = this
            clearInterval(this.timer)
            this.timer = ''
            let msg = {
               'type': 'heartbeat',
            }
            this.timer = setInterval(() => {
               that.sendSocketMessage(JSON.stringify(msg)).then(res => {
                  console.log('心跳成功')
               }).catch(res => {
                  console.log('发送失败')
                  console.log((res))
               })
            }, 2000)
         },
         beforeDestroy() {
            if (this.socketTask) {
               this.socketTask.close()
               this.socketTask = null
            }
            if (this.timer) {
               clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
            }
         },
      }
@@ -566,7 +554,7 @@
      justify-content: center;
   }

   .ridoa {
   .ridoaBox {
      text-align: center;
      padding: 10px 0px;
   }
@@ -575,9 +563,11 @@
      color: #fff;
   }

   /deep/.u-form {
      display: flex;
      justify-content: space-evenly;
   .orgSearch {
      /deep/.u-form {
         display: flex;
         justify-content: space-evenly;
      }
   }

   .slot-content {
@@ -593,4 +583,9 @@
   .ridioBox {
      margin-bottom: 10px;
   }

   /deep/.u-modal__content {
      max-height: 300px;
      overflow: auto;
   }
</style>