优化页面UI更新

zhuguifei

昨天 7941623b1fb108a154ea4270d7c7e2df6031f6e5

 pages/tabBar/device.vue

@@ -169,20 +169,27 @@
               </view>



               <view class="info-box">

                  <view class="left flex-sub">

                  <view class="left flex-sub" style="width: 60%;">

                     <view class="title text-sm text-cut">报警信息:</view>

                     <template v-if="item.errorData">

                        <view class="title text-sm text-red">故障 {{item.errorData.length}}</view>

                        <view class="title text-sm text-red text-cut">{{ (item.errorData.length > 0) ? item.errorData[0]:'' }}</view>

                     </template>



                     <template v-if="item.warnData">

                        <view class="title text-sm text-yellow">告警 {{item.warnData.length}}</view>

                     </template>

                       <template v-else-if="item.warnData">

                        <view class="title text-sm text-yellow text-cut"> {{(item.warnData.length > 0) ? item.warnData[0]:''}}</view>

                     </template> 
                     <view v-if="getErrorCount(item) > 0">

                        <u-tag  size="mini" :text="getErrorCount(item)" type="error" plain></u-tag>

                     </view>

                     <view style="width: 20rpx;"></view>

                     <view v-if="getWarnCount(item) > 0">

                        <u-tag  size="mini" :text="getWarnCount(item)" type="warning" plain></u-tag>

                     </view>



                  </view>

                  <view class="right" style="min-width: 240rpx;">

                     <view class="title text-sm">更新时间:</view>

                     <view class="title text-sm text-gray">{{ refreshTime}}</view>

                     <view class="title text-sm text-gray">{{ item.refreshTime}}</view>

                  </view>

               </view>



@@ -201,24 +208,28 @@
            loading: true,

            // v-model绑定的这个变量不要在分页请求结束中自己赋值！！！

            dataList: [],

            curDate: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),

            curDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),

            isProcessing: false,

            // key->设备租户+code 

            dataMap: new Map(),

            // 更新时间

            refreshTime: '',



            alarmEquCount: 0,

            faultEquCount: 0,

            timer: null

            timer: null,

            mqttThrottleMs: 1000,

            lastMqttTs: 0,

            dateTimer: null



         }

      },

      mounted() {

      onShow() {

         this.startTimer()

         this.startDateTimer()

         this.mqttData()

      },

      beforeDestroy() {

      onHide() {

         this.stopTimer()

         this.stopDateTimer()

         uni.$off(this.$constant.MQTT_TOPIC_MESSAGE)

      },

      onTabItemTap: function(e) {

@@ -242,6 +253,7 @@
         },

         // 设备数据和mtqq实时数据合并

         mergeMqttRealData(mqttData) {



            const {

               tenantid,

               machineid

@@ -251,24 +263,52 @@
            const targetItem = this.dataList.find(item =>

               item.tenantId === tenantid && item.code === machineid

            );

            if (targetItem && !targetItem.online) {

               mqttData = {};

            }

            if (targetItem) {

               const updatedItem = {

                  ...targetItem,

                  realData: mqttData

               };

               updatedItem.refreshTime = dayjs().format('HH:mm:ss');

               this.$set(this.dataList, this.dataList.indexOf(targetItem), updatedItem);



            }





         },

			
         getErrorCount(item){

            let count = 0;

            if(item.errorData){

               count += item.errorData.length

            }

            return count;

         },

         getWarnCount(item){

            let count = 0;

            if(item.warnData){

               count += item.warnData.length

            }

            return count;

         },

			
         startTimer() {

            this.timer = setInterval(() => {

               this.queryRealFaultData();

               //this.queryRealFaultData();

            }, 3000);

         },

         stopTimer() {

            clearInterval(this.timer);

         },

         startDateTimer() {

            this.dateTimer = setInterval(() => {

               this.curDate = dayjs().format('YYYY-MM-DD HH:mm:ss')

            }, 1000);

         },

         stopDateTimer() {

            clearInterval(this.dateTimer);

         },

         queryRealFaultData() {

            //发送数据

@@ -297,6 +337,9 @@
         mqttData() {

            uni.$on(this.$constant.MQTT_TOPIC_MESSAGE, (data) => {

               try {

                  const now = Date.now();

                  if (now - this.lastMqttTs < this.mqttThrottleMs) return;

                  this.lastMqttTs = now;

                  // 1. 数据解析和验证

                  const {

                     data: wdata,

@@ -318,7 +361,7 @@
                     case topics.realData:

                        this.mergeMqttRealData(wdata);

                        break;

                     case topics.realFaultTopic:
                     case topics.realFaultTopic:

                     case topics.oneceFaultTopic:

                        this.handleFaultData(wdata);

                        break;

@@ -402,13 +445,17 @@
               const targetItem = this.dataList.find(i =>

                  i.tenantId == tenantId && i.code == equCode

               );



					
               if (targetItem) {

                  const updatedItem = {

                     ...targetItem,

                     errorData: faults.filter(f => f.faultType === 1).map(n => n.faultName),

                     warnData: faults.filter(f => f.faultType === 2).map(n => n.faultName),

                     errorData: targetItem.online ? faults.filter(f => f.faultType === 1).map(n => n.faultName) : [],

                     warnData: targetItem.online ? faults.filter(f => f.faultType === 2).map(n => n.faultName) : [],

                  };

                  if(targetItem.online){

                     updatedItem.refreshTime = dayjs().format('HH:mm:ss');

                  }

						
                  this.$set(this.dataList, this.dataList.indexOf(targetItem), updatedItem);

               }

            });

@@ -542,4 +589,4 @@
         }

      }

   }

</style>
</style>