添加mqtt数据接口

guifei zhu

2024-11-27 6017f46b762663b9393cdae8422e0de1ed3db218

 pages/tabBar/device.vue

@@ -12,13 +12,14 @@


            <view class="card-box dynamic shadow">

               <view class="title-box margin-bottom-sm">

                  <view  style="width: 100vw;" class="left justify-between">

                  <view style="width: 100vw;" class="left justify-between">

                     <view class="flex align-center">

                        <uni-text class="cuIcon-titles text-blue"></uni-text>

                        <view class="title">总览</view>

                     </view>

                     <view>

                        <text class="text-gray margin-right-lg">2024-07-14</text>

                        <text

                           class="text-gray margin-right-lg">{{curDate}}</text>

                     </view>



                  </view>

@@ -28,20 +29,20 @@
                  <view class="flex">

                     <view class="flex-sub flex flex-direction text-center">

                        <text class="text-df">设备总数</text>

                        <text class="text-bold text-sl margin-top-xs  text-gray margin-top-sm">20

                        <text class="text-bold text-sl margin-top-xs  text-gray margin-top-sm">{{equCount}}

                           <text class="text-gray text-sm margin-left-xs">台</text></text>

                     </view>
							
                     <view class="flex-sub flex flex-direction text-center">
                        <text class="text-df">开机设备</text>
                        <text class="text-bold text-sl margin-top-xs text-gray margin-top-sm">10
                           <text class="text-gray text-sm margin-left-xs">台</text></text>
                     </view>
							
                     <view class="flex-sub flex flex-direction text-center">
                        <text class="text-df">运行设备</text>
                        <text class="text-bold text-sl margin-top-xs text-cyan margin-top-sm">10
                           <text class="text-gray text-sm margin-left-xs">台</text></text>
                     </view>



                     <view class="flex-sub flex flex-direction text-center">

                        <text class="text-df">开机设备</text>

                        <text class="text-bold text-sl margin-top-xs text-gray margin-top-sm">{{onlineCount}}

                           <text class="text-gray text-sm margin-left-xs">台</text></text>

                     </view>



                     <view class="flex-sub flex flex-direction text-center">

                        <text class="text-df">运行设备</text>

                        <text class="text-bold text-sl margin-top-xs text-cyan margin-top-sm">{{onlineCount}}

                           <text class="text-gray text-sm margin-left-xs">台</text></text>

                     </view>

                  </view>

                  <view class="margin-top">

@@ -58,62 +59,66 @@




         </template>

			
			 
			
         <u-skeleton
                 class=" "
               rows="20"
               :loading="loading"
               :title="false"
            >
         <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->

         <view class="card-box dynamic shadow" v-for="(item,index) in dataList" :key="index"

            @click="itemClick(item)">

            <view class="title-box">

               <view class="left flex-sub">

                  <uni-text class="cuIcon-titles text-blue"></uni-text>

                  <view class="title text-cut">1#智能干燥机</view>

                  <view class="flex title text-green text-sm">

                     <u-tag size="mini" text="在线" type="success" plain plainFill></u-tag>
                     <u-tag class="margin-left-xs" size="mini" text="停机" type="error" plain plainFill></u-tag>







         <u-skeleton class=" " rows="20" :loading="loading" :title="false">

            <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->

            <view class="card-box dynamic shadow" v-for="(item,index) in dataList" :key="index"

               @click="itemClick(item)">

               <view class="title-box">

                  <view class="left flex-sub">

                     <uni-text class="cuIcon-titles text-blue"></uni-text>

                     <view class="title text-cut">{{$lget(item,'name')}}</view>

                     <view class="flex title text-green text-sm">

                        <u-tag v-if="item.online" size="mini" text="在线" type="success" plain plainFill></u-tag>

                        <u-tag v-else  size="mini" text="离线" type="warning" plain plainFill></u-tag>

                        <u-tag v-if="item.online" class="margin-left-sm" size="mini" text="在线" type="success" plain plainFill></u-tag>

                        <u-tag  v-else class="margin-left-sm" size="mini" text="停机" type="error" plain plainFill></u-tag>

                     </view>

                  </view>

               </view>

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

                  <!-- <u-badge :isDot="true" type="success"></u-badge> -->

                  <view class="title text-gray text-sm">开机时间:</view>

                  <view class="title text-gray text-sm">10:00:10</view>

               </view>

            </view>



            <view class="info-box">

               <view class="left flex-sub">

                  <view class="title text-sm">烘干药材:</view>

                  <view class="title text-sm">生地黄</view>

               </view>

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

                  <view class="title text-sm">烘干时间:</view>

                  <view class="title text-sm">01:20:00</view>

               </view>

            </view>



            <view class="info-box">

               <view class="left flex-sub">

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

                  <view class="flex  title text-sm">

                     <u-tag size="mini" text="温度传感器报警" type="warning" plain plainFill></u-tag>

                     <u-tag size="mini" class="margin-left-xs" text="前门未关" type="warning" plain

                        plainFill></u-tag>

                     <u-tag size="mini" class="margin-left-xs" text="风箱低位报警" type="error" plain

                        plainFill></u-tag>

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

                     <!-- <u-badge :isDot="true" type="success"></u-badge> -->

                     <!-- <view class="title text-gray text-sm">开机时间:</view> -->

                     <view class="title text-gray text-sm">{{$lget(item,'upTime')}}</view>

                  </view>

               </view>



               <view class="info-box">

                  <view class="left flex-sub">

                     <view class="title text-sm">烘干药材:</view>

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

                  </view>

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

                     <view class="title text-sm">烘干时间:</view>

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

                  </view>

               </view>



               <view class="info-box">

                  <view class="left flex-sub">

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

                     <view class="flex  title text-sm">

                        <template v-if="item.online && !item.fault">

                           <u-tag size="mini" text="正常" type="success" plain plainFill></u-tag>

                        </template>

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

                           <u-tag size="mini" text="温度传感器报警" type="warning" plain plainFill></u-tag>

                           <u-tag size="mini" class="margin-left-xs" text="前门未关" type="warning" plain

                              plainFill></u-tag>

                           <u-tag size="mini" class="margin-left-xs" text="风箱低位报警" type="error" plain

                              plainFill></u-tag>

                        </template>

                        <template v-else>

                        </template>

                     </view>

                  </view>



               </view>



            </view>



         </view>



         </u-skeleton>
         </u-skeleton>

      </z-paging>

   </view>

</template>

@@ -121,46 +126,54 @@
<script>

   export default {

      data() {

         return {
            loading:true,

         return {

            loading: true,

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

            dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],

            dataList: [],

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

         }

      },

      methods: {

         queryList(pageNo, pageSize) {
         queryList(pageNo, pageSize) {

            this.loading = true;

            // 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用

            // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可

            // 模拟请求服务器获取分页数据，请替换成自己的网络请求

            // const params = {

            //    pageNo: pageNo,

            //    pageSize: pageSize,

            // }

            // this.$request.queryList(params).then(res => {

            //    // 将请求的结果数组传递给z-paging

            this.$refs.paging.complete(this.dataList);

            // }).catch(res => {

            //    // 如果请求失败写this.$refs.paging.complete(false);

            //    // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理

            //    // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可

            //    this.$refs.paging.complete(false);

            // })
            setTimeout(() => {
               this.loading = false
            }, 1000)

         },
         itemClick(item){
            uni.navigateTo({
               url:"/pages/device/control"
            })
            const params = {

               pageNo: pageNo,

               pageSize: pageSize,

            }

            this.$api.queryEquList(params).then((res) => {

               //    // 将请求的结果数组传递给z-paging

               this.$refs.paging.complete(res.result.records);

               this.loading = false

            }).catch(res => {

               // 如果请求失败写this.$refs.paging.complete(false);

               // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理

               // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可

               this.$refs.paging.complete(false);

               this.loading = false

            })



         },

         itemClick(item) {

            uni.navigateTo({

               url: "/pages/device/control?code="+item.code+"&clientId="+item.clientId

            })

         }



      },onReady() {
			
         setTimeout(() => {
            this.loading = false
         }, 1000)
      },

      onReady() {



      },

      computed: {

         equCount() {

            return this.dataList.length

         },

         onlineCount() {

            const list = this.dataList.filter(item => item.online)

            return list.length

         }

      }

   }

</script>