优化页面UI更新

zhuguifei

昨天 7941623b1fb108a154ea4270d7c7e2df6031f6e5

 pages/tabBar/device.vue

@@ -169,15 +169,22 @@
               </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;">

@@ -201,23 +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(),



            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) {

@@ -266,13 +278,37 @@




         },

			
         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() {

            //发送数据

@@ -301,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,

@@ -405,16 +444,16 @@
               const [tenantId, equCode] = key.split("_");

               const targetItem = this.dataList.find(i =>

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

               );
					
               );

					
               if (targetItem) {

                  const updatedItem = {

                     ...targetItem,

                     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');
                  };

                  if(targetItem.online){

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

                  }

                  

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

@@ -550,4 +589,4 @@
         }

      }

   }

</style>
</style>