回收端设备页基础

src/pages.json

@@ -113,6 +113,12 @@
         "navigationBarTitleText": "清运方式选择",
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/deviceList/index",
+      "style": {
+        "navigationBarTitleText": "设备列表"
+      }
     }
   ],
   "globalStyle": {
@@ -134,18 +140,18 @@
         "iconPath": "static/tabs/cart_default.png",
         "selectedIconPath": "static/tabs/cart_selected.png"
       },
-      // {
-      //   "text": "清运页",
-      //   "pagePath": "pages/recycleClean/recycleClean",
-      //   "iconPath": "static/tabs/cart_default.png",
-      //   "selectedIconPath": "static/tabs/cart_selected.png"
-      // },
       {
         "text": "定时回收",
         "pagePath": "pages/timeOrder/timeOrder",
         "iconPath": "static/tabs/time_default.png",
         "selectedIconPath": "static/tabs/time_selected.png"
       },
+      {
+        "text": "设备列表",
+        "pagePath": "pages/deviceList/index",
+        "iconPath": "static/tabs/device_default.png",
+        "selectedIconPath": "static/tabs/device_selected.png"
+      },
       {
         "text": "到站回收",
         "pagePath": "pages/dzOrder/dzOrder",

src/pages/deviceList/index.vue

@@ -0,0 +1,351 @@
+<script setup lang="ts">
+import { ref, computed, reactive } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useMemberStore } from '@/stores'
+import { onReady, onShow } from '@dcloudio/uni-app'
+import { getDeviceList } from '@/services/device'
+import dayjs from 'dayjs'
+
+// 经纬度
+let location = reactive({
+  longitude: 0,
+  latitude: 0,
+})
+// 设备列表
+let deviceInfo: any = ref({})
+let totalSltd: any = ref(true)
+let onlineSltd: any = ref(false)
+let smogSltd: any = ref(false)
+let fullSltd: any = ref(false)
+// 请求参数
+let queryParams: any = ref({
+  deviceName: '',
+  online: false,
+  checkSmog: false,
+  checkFull: false,
+  location: location,
+})
+
+// 表示用户扫码参数
+onLoad((query: any) => {
+  console.log('设备列表：', query)
+  getLocationInfo()
+})
+// 获取坐标信息
+onShow(() => {
+  if (location.longitude) {
+    console.log('hi-a', location)
+    console.log(queryParams.value)
+    fnGetDeviceList()
+  }
+})
+// 微信 - 获取当前经纬度
+const getLocationInfo = () => {
+  uni.getLocation({
+    type: 'gcj02',
+    // isHighAccuracy: true,
+    // highAccuracyExpireTime: 5000,
+    success(res) {
+      console.log(res)
+      const longitude = res.longitude.toFixed(6)
+      const latitude = res.latitude.toFixed(6)
+      location = Object.assign(location, {
+        longitude: longitude,
+        latitude: latitude,
+      })
+      console.log('hi-b', location)
+      console.log(queryParams.value)
+      fnGetDeviceList()
+    },
+    fail(err) {
+      uni.showModal({
+        content: '检测到您没打开获取定位功能权限，是否去设置打开？',
+        confirmText: '确认',
+        cancelText: '取消',
+        success: function (res) {
+          if (res.confirm) {
+            uni.openSetting({
+              success() {
+                getLocationInfo()
+              },
+            })
+          }
+        },
+      })
+    },
+  })
+}
+// 获取设备列表
+const fnGetDeviceList = () => {
+  getDeviceList(queryParams.value)
+    .then((res) => {
+      if (res.code == 200) {
+        deviceInfo.value = res.data
+      }
+    })
+    .catch((err: any) => {})
+}
+
+// 是否在线过滤切换
+const fnOnlineSltdChg = () => {
+  // console.log('fnOnlineSltdChg:', queryParams.value.online)
+  if (queryParams.value.online == true) {
+    queryParams.value.online = false
+  } else {
+    queryParams.value.online = true
+  }
+  fnGetDeviceList()
+}
+// 是否烟雾过滤切换
+const fnSmogSltdChg = () => {
+  // console.log('fnSmogSltdChg:', queryParams.value.checkSmog)
+  if (queryParams.value.checkSmog == true) {
+    queryParams.value.checkSmog = false
+  } else {
+    queryParams.value.checkSmog = true
+  }
+  fnGetDeviceList()
+}
+// 是否烟雾过滤切换
+const fnFullSltdChg = () => {
+  // console.log('fnFullSltdChg:', queryParams.value.checkFull)
+  if (queryParams.value.checkFull == true) {
+    queryParams.value.checkFull = false
+  } else {
+    queryParams.value.checkFull = true
+  }
+  fnGetDeviceList()
+}
+
+// 获取屏幕边界到安全区域距离
+// 微信扫码
+const fnScan = async () => {
+  // 只允许从相机扫码
+  wx.scanCode({
+    onlyFromCamera: true,
+    success(res) {
+      console.log('scan:', res)
+      let pathArr = res.path.split('=')
+      // uni.redirectTo({
+      //   url: '/pages/selectAction/selectAction?devCode=' + pathArr[1],
+      // })
+    },
+  })
+}
+</script>
+<template>
+  <view class="viewport">
+    <scroll-view
+      :scroll-y="true"
+      class="viewport sk-transparent"
+      id="scroller"
+      :enable-back-to-top="true"
+    >
+      <uni-card>
+        <uni-row>
+          <uni-col :span="12">
+            <view class="">
+              <text>扫码清运</text>
+            </view>
+          </uni-col>
+          <uni-col :span="12">
+            <view style="text-align: right"
+              ><uni-icons type="scan" size="30" @click="fnScan"></uni-icons
+            ></view>
+          </uni-col>
+        </uni-row>
+        <view
+          class="cs-slt-list"
+          style="border-top: solid 1px #ececf4; margin: 10rpx 0rpx; padding: 10rpx 0rpx"
+        >
+          <uni-row>
+            <uni-col :span="6">
+              <view v-if="totalSltd == true" class="cs-slt-item cs-slt-item-sltd">
+                <view>
+                  <text class="slt-number">{{ deviceInfo.total }}</text>
+                </view>
+                <view>
+                  <text>管理总数</text>
+                </view>
+              </view>
+              <view v-else class="cs-slt-item">
+                <view>
+                  <text>{{ deviceInfo.total }}</text>
+                </view>
+                <view>
+                  <text>管理总数</text>
+                </view>
+              </view>
+            </uni-col>
+            <uni-col :span="6">
+              <view
+                v-if="queryParams.online == true"
+                class="cs-slt-item cs-slt-item-sltd"
+                @click="fnOnlineSltdChg"
+              >
+                <view>
+                  <text class="slt-number">{{ deviceInfo.online }}</text>
+                </view>
+                <view>
+                  <text>在线</text>
+                </view>
+              </view>
+              <view v-else class="cs-slt-item" @click="fnOnlineSltdChg">
+                <view>
+                  <text class="slt-number">{{ deviceInfo.online }}</text>
+                </view>
+                <view>
+                  <text>在线</text>
+                </view>
+              </view>
+            </uni-col>
+            <uni-col :span="6">
+              <view
+                v-if="queryParams.checkSmog == true"
+                class="cs-slt-item cs-slt-item-sltd"
+                @click="fnSmogSltdChg"
+              >
+                <view>
+                  <text class="slt-number">{{ deviceInfo.smog }}</text>
+                </view>
+                <view>
+                  <text>烟雾</text>
+                </view>
+              </view>
+              <view v-else class="cs-slt-item" @click="fnSmogSltdChg">
+                <view>
+                  <text class="slt-number">{{ deviceInfo.smog }}</text>
+                </view>
+                <view>
+                  <text>烟雾</text>
+                </view>
+              </view>
+            </uni-col>
+            <uni-col :span="6">
+              <view
+                v-if="queryParams.checkFull == true"
+                class="cs-slt-item cs-slt-item-sltd"
+                @click="fnFullSltdChg"
+              >
+                <view>
+                  <text class="slt-number">{{ deviceInfo.full }}</text>
+                </view>
+                <view>
+                  <text>满溢</text>
+                </view>
+              </view>
+              <view v-else class="cs-slt-item" @click="fnFullSltdChg">
+                <view>
+                  <text class="slt-number">{{ deviceInfo.full }}</text>
+                </view>
+                <view>
+                  <text>满溢</text>
+                </view>
+              </view>
+            </uni-col>
+          </uni-row>
+        </view>
+      </uni-card>
+      <uni-card
+        v-for="deviceItem in deviceInfo.list"
+        :title="'设备名称：' + deviceItem.deviceName"
+        :key="deviceItem.id"
+      >
+        <uni-row>
+          <uni-col :span="24" class="sty-tag-list">
+            <view class="sty-tag-list">
+              <uni-tag
+                v-if="deviceItem.status == 1"
+                class="sty-tag-item"
+                text="在线"
+                type="success"
+              />
+              <uni-tag v-else class="sty-tag-item" text="离线" />
+              <uni-tag
+                v-if="deviceItem.smogStatus == 1"
+                class="sty-tag-item"
+                text="烟雾：报警"
+                type="error"
+              />
+              <uni-tag v-else class="sty-tag-item" text="烟雾：未报警" type="success" />
+              <uni-tag
+                v-if="deviceItem.fullStatus == 1"
+                class="sty-tag-item"
+                text="满溢"
+                type="error"
+              />
+              <uni-tag v-else class="sty-tag-item" text="未满溢" type="success" />
+            </view>
+          </uni-col>
+          <uni-col :span="24">
+            <view style="font-size: 12px">
+              <image
+                style="width: 45rpx; height: 45rpx"
+                src="@/static/images/bell.png"
+                mode="scaleToFill"
+              />
+              <text>上次清运时间：</text>
+              <text style="color: #0d0d26">{{
+                dayjs(deviceItem.cleanDate).format('YYYY-MM-DD HH:mm:ss')
+              }}</text>
+            </view>
+          </uni-col>
+          <uni-col
+            v-for="bucketItem in deviceItem.bucketList"
+            :key="bucketItem.bucketCode"
+            :span="24"
+          >
+            <view class="">
+              <text>{{ bucketItem.showName }}：</text>
+              <text style="color: #0d0d26">重量 {{ bucketItem.currentWeight }} kg</text>
+            </view>
+            <view v-if="bucketItem.fullStatus == 1" class="" style="color: #e63232">
+              <text>满溢时间：{{ bucketItem.fullTime }}</text>
+            </view>
+          </uni-col>
+        </uni-row>
+      </uni-card>
+      <uni-card>
+        <uni-row>
+          <uni-col :span="24">
+            <view style="text-align: center">
+              <text>已到底部</text>
+            </view>
+          </uni-col>
+        </uni-row>
+      </uni-card>
+    </scroll-view>
+  </view>
+</template>
+
+<style lang="scss">
+page {
+  height: 100%;
+  overflow: hidden;
+}
+
+.viewport {
+  width: 100vw;
+  height: 100vh;
+  .sty-tag-list {
+    margin: 10rpx 0rpx;
+    .sty-tag-item {
+      margin-right: 10rpx;
+    }
+  }
+  .cs-slt-list {
+    .cs-slt-item {
+      text-align: center;
+      .slt-number {
+        font-size: 16px;
+        color: #000000;
+      }
+    }
+    .cs-slt-item-sltd {
+      .slt-number {
+        color: #3775f6;
+      }
+    }
+  }
+}
+</style>

src/services/device.ts

@@ -357,3 +357,19 @@ export const getLoginDevice = (deviceCode: String) => {
     data,
   })
 }
+// 获取设备列表
+export const getDeviceList = (queryParams: any) => {
+  // deviceCode - 设备登录
+  const data: any = {
+    deviceName: queryParams.deviceName,
+    online: queryParams.online,
+    checkSmog: queryParams.checkSmog,
+    checkFull: queryParams.checkFull,
+    location: queryParams.location,
+  }
+  return http({
+    method: 'POST',
+    url: '/device/getDeviceList',
+    data,
+  })
+}