优化页面UI更新

zhuguifei

昨天 7941623b1fb108a154ea4270d7c7e2df6031f6e5

 pages/tabBar/device.vue

@@ -177,13 +177,13 @@


                       <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>
                     </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>

@@ -208,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) {

@@ -273,22 +278,22 @@




         },

			
         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;
         },
			
			
         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();

@@ -296,6 +301,14 @@
         },

         stopTimer() {

            clearInterval(this.timer);

         },

         startDateTimer() {

            this.dateTimer = setInterval(() => {

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

            }, 1000);

         },

         stopDateTimer() {

            clearInterval(this.dateTimer);

         },

         queryRealFaultData() {

            //发送数据

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

@@ -346,7 +362,7 @@
                        this.mergeMqttRealData(wdata);

                        break;

                     case topics.realFaultTopic:

                     case topics.oneceFaultTopic:
                     case topics.oneceFaultTopic:

                        this.handleFaultData(wdata);

                        break;

                  }

@@ -428,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);

@@ -573,4 +589,4 @@
         }

      }

   }

</style>
</style>