From 0d76437e2e408c3470cf8d6bf43688acf194dcbe Mon Sep 17 00:00:00 2001
From: mhsnet <mhsnet@163.com>
Date: Tue, 13 Aug 2024 16:05:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=9E=E6=94=B6=E7=AB=AF=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E9=A1=B5=E5=9F=BA=E7=A1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                      |  18 +-
 src/pages/deviceList/index.vue      | 351 ++++++++++++++++++++++++++++
 src/services/device.ts              |  16 ++
 src/static/images/bell.png          | Bin 0 -> 655 bytes
 src/static/images/bell2.png         | Bin 0 -> 1354 bytes
 src/static/images/scan.png          | Bin 0 -> 1194 bytes
 src/static/images/scan2.png         | Bin 0 -> 2515 bytes
 src/static/tabs/device_default.png  | Bin 0 -> 309 bytes
 src/static/tabs/device_selected.png | Bin 0 -> 359 bytes
 9 files changed, 379 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/deviceList/index.vue
 create mode 100644 src/static/images/bell.png
 create mode 100644 src/static/images/bell2.png
 create mode 100644 src/static/images/scan.png
 create mode 100644 src/static/images/scan2.png
 create mode 100644 src/static/tabs/device_default.png
 create mode 100644 src/static/tabs/device_selected.png

diff --git a/src/pages.json b/src/pages.json
index f2bba63..d91127c 100644
--- a/src/pages.json
+++ b/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",
diff --git a/src/pages/deviceList/index.vue b/src/pages/deviceList/index.vue
new file mode 100644
index 0000000..6e73d42
--- /dev/null
+++ b/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>
diff --git a/src/services/device.ts b/src/services/device.ts
index 6209679..0b8c99d 100644
--- a/src/services/device.ts
+++ b/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,
+  })
+}
diff --git a/src/static/images/bell.png b/src/static/images/bell.png
new file mode 100644
index 0000000000000000000000000000000000000000..713646cb3d3314bbbe9d664b021f4872d61974d1
GIT binary patch
literal 655
zcmV;A0&x9_P)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00001b5ch_0Itp)
z=>Px%Nl8ROR5(wqluKw6Q51&%6VxnRL`%0mD6SP-K`O0HwRNi?Vq;oS7Zn6+>!K(K
zjUu8TwCY9?-)S@8!s5b>l}1~n#fD<-Qi87Bl!TxN66X9mNoKs6OhB*$7v{dcdtUz$
ztnw$T%tKvZ*8(H*9VcMp5P%(2Y@{Mj#S#>gp)ejzbxXl-P#~~-n!QkrLeWS9P=Lm8
z=Bmhvje+zL88@LdzyohM@&}S|04B)$_dTGB#B5A1yU;4&{wc;qk*oo+<my)_wo<Xd
zwH7Q}u0Y@WUP(Go57_mZ5!lF5(coEExd4TgJ}j|zizyI2F39j=<yR5gGN+~B0r$P)
zU@2}Di0QH_teK+{YaeHdL{C*X-1EfXe81fCfSoUy2GQY<T_q{j%rS|zJ!Oho20H8J
zSrF;@Gt%h+qc504xio4IE3Db$5^H_P2Ov%bB}|F@!hke*z>epn|5f**5}Cpm><Mo{
zWL*(+P&AeHjPN+~%y|(HxYuH?QoMg%sdj5(?i>1cHe%Bn;vI<1zBuO>hYbtclANX@
z8k7_-3^wk6I4k|lql|}$q%S;g7cWZGv#|9E&xvBJPEt&zOh9pv#QG`=iJ_%SGUfqW
z?lH19gwL+r0+kX_Qmzbtgwd3}VAP>g<-6~eH2lo3+j_}z*Qx0Jbfv868ZGa-!x7j>
zl;r2DHNS!?4=0wd*3q&n@aCJ03vt_(VNi*XSb>e9<!faP2Q~+Dqvbjyw&JAI4@qn{
p`r$_alRt}ioW1dn{qTRf_-}NX<0O}Q4*LKA002ovPDHLkV1mr8E&%`l

literal 0
HcmV?d00001

diff --git a/src/static/images/bell2.png b/src/static/images/bell2.png
new file mode 100644
index 0000000000000000000000000000000000000000..979044e6daf8c9ba31786938ac02efcb9c40f1b0
GIT binary patch
literal 1354
zcmV-Q1-1H#P)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700001b5ch_0Itp)
z=>Px)1W80eR9Hvtm~Tu~WgN%9KVXa+FML5S+}!9@Yt1bvb6OEMRAwvUS}|?cO)OU~
zR-^ULwUS%Q*%~cbYg%dIhLdKFYvQDaL84gx2@03ZSGKuj!He2hG2uSn?z!h2IQQJ=
zx#wJj=8G6F4saiy&-45Ke&65kIf5JfOKxyJ{114&3SCzOBYi9@1|Ak5LZX5Si$Iit
zu)fDYT%p1+fRo879PY1^v3!AN1-R-2t0jqM5RZT;N(0f^+I_Zu&U~IC(L<uO?@{?S
zENEVUHK$l!bPYQ|M6J!kfTh8GumpMvlGyys<ML||XlTINKE^=o22m0Q%p1K7NQ=k@
z9*4r_{s!5f3o;a7Z68~p5O;DbD<VEAZMpqY&wyq8E%n*>iM8^U2{I6{_BdNoi{m<}
zOkmy!d)Jwws(|>(C-smy0c(31BhcZ`p}7K^h6hptVg0FCw%kU*n&T`lP`DsOX<+m$
zMQurYEo-rMgWy)EwEbkut*`hARfyXMW0{3x1YG$Qj{#VnGkOk~8&M&meUHguE1#+k
zvc7;wWF5}QMQwExiNTGs#+#2?z*S$fnhO0!DScq>Aw(hC*WdtlvR;5hn8M0{6+})y
zHRF?7z!g0_0+lvlqu1$@Ujfkp4<Kj*hN^N`c7??0XJ(?91sFNPvcdxVW_5`4nj9PW
ztCB=?V4V}e{j3Kx5@(xs<{k=DlY)ikpS9a!7T}6*K24+z*?4lTUDzMb0Hksx)^`)*
z;Yl=}c~16e0c*bGUI2|jm22p|(Sev9!F%`3<e<qHO?v=n|Gr5!Y5^Zia402BMb5l2
zRH70@2fcvGk=RpIfgWm4Lc?dDmr6Zg7f0!gOs1Y|I=LdEgB$D!F5SaBiv-_Uz1!%8
z{xov^RAKB~v)rNuj2t5Km1G(Kcw(?o4!J(I>{G54pff04(t`M4&%G$=`p7Dh>Vr;p
zd76FT2DU8LCYPuF!Sb_Ba&;PV7hePLZk~pX^DmhIKj$dnOvRe&%g7;pZVmr+4OKrk
z$+!!-bSGOxIRi)TPU1Sp*blE5Bz~ZiLn(u;$eA}mNw3g*^>@@=j?07#dC!O3F2I%`
zHPSsD7#@1nP$X3cxEIP`GX^k2U+wv06l=VYOWJrqh;=~&gd*C9w-{{Zz7B2>qCHFx
zH5#^?8VX;Wc|jViDBjV+(wi5c3&hHdb^30#Y3Oy?qb-uVKW16UO?Imb<ykI_A-W1^
zot!{haWRfTVX>#;O`T-w?@27Y6gRZGbQfr+b<)g>k-vuq-{QR1@h6A{UOUOr2)ciK
zQ|jE@)lM_ZKV!8J{f6AK*P5@F(_pjlQw2muwg!w_*8a;sVHbd?cPtOx5gcFi4;;qc
z>l~JXo}aeLLxBTpTISs>S4sSmSF4&Om?Qo8WDyo$d?Vz@Z!KE3lQ9w<LEdG`t(+0_
zr3s1kBX8$%X`1c=AK7<e?PhuS;<VhF{8b9^3-8S0+UY_rX=97f0~ypwd<CQ%2HXNl
z9oz_~^+9ifdY|w5fH5I<fhY}o&j<jU5MtBFwmEq9;euASvfP2px{i9QUE5*2(-DwJ
z63rL4&Ed-<Z!|04V>Od_S%}qiI*#8PH90#)pj(pIF|vK0UcdR}zb($Pl0wuM2<~SR
z6#y1_rg7_5b|rPw8&(SalM^_4>HYuc1*R!a=i~Q*Z@1=S(|rEtzmxe+bjMpM=l}o!
M07*qoM6N<$g7Or9>i_@%

literal 0
HcmV?d00001

diff --git a/src/static/images/scan.png b/src/static/images/scan.png
new file mode 100644
index 0000000000000000000000000000000000000000..604fb8da3bb5863896a0443ff5c13574d4751130
GIT binary patch
literal 1194
zcmV;b1XcTqP)<h;3K|Lk000e1NJLTq001HY001Hg1^@s6I!6n_00001b5ch_0Itp)
z=>Px(WJyFpR9HuySX*yYRTTc#*+)V!qLM1Hm|BwBL@I;`F@ZD=y|=@FY0533iKq|$
z0u#}`DM+FqQA()Qs8m2|X?>9g;v-5hmM2I|UyK+pC8W{PB6B%s>$%L#-sh}+riXc(
zwb$P3Ti;si+k1upAUi3WZA%^j&<WrnNYAQ&d=q2$y*RrJjIpKAASLDjc}cqBt&96;
zhCC1g@(K}Fr4HstVgjZBEP*-cT3aZ0!Tp*DyNsEcf*F~(4>n0oQEtNhhX^a#%u<#k
zB*%axZZ6kNO5CB`gd@|`-dMgG<uLV186M@v9o{EJoz+CNZHZ^-i?scG90)%JRch}y
zn9^>sk)-WkMSzsYOLeWuj_#1ESHi87J*NO+0`6-8cCRBWw@J%lblSz#&-#X!HxhQY
zSeoD5zY-^Zbn(MYhEZiZWzU8{m@aI51Q^Z=d^_Xfm%o+sCGgW961Nt0h8tD_EsyJf
zw>ALJ)DiZKyKr3n40ShU&y*xfr35zB18=tr9GG&dL6t0O_KE~vXe1oWSlD&W!D1l{
zE#rzyePg9~K|+fUq(k7qq=Q*6`<lI?XY9FW)&@WZ&W1n?=&A2?0Hm_6IC?<d=@fYB
zf`eNNj38AN-Y8<3wZOq`0t07CSj;o`R~Vdnzfc&7Wc*w`aHvaQaNNP|yJlsKQKg*I
z+DI5`7w8`=;cmG!%tTV}=OGZLZVw1x!)jpq_wr7@L6UmKJ7fK7;9BL3c=<dF^?X)}
zNW7^V`SNKzaXrK&$X&41^J$S!NCG?85$YZ!bCdFI6U2#ty78Bbt7R>Tta)Fl`x70A
ziuU*p3y-eQbs-^k;?mV$B~E<r8edA(JsJVBL@GIYE7KP%5qEFsy+U0dD?pa06O0H~
z1t8%J6F$FLyGBAFOx>F5fWv(Pubg+VP|*MrWjvPkPY{N>1qR1TC^`ue-+8LYJd6TV
zo1Y}So3k<aWf8M?s`9J}AT!x&vutZ34E5M}akS_Q8qX#`ohJ)MiQn810NFnl0$F0|
z)Lv<OnlRLBW9LXQxN8h&P{(ith~nr0IkLmX{?kRw&Kp#`2DrB75Xh;35tcwHK^-R)
zAdy2itRWohxAFQnC0zeg?~Q_2Zw7>?q~(t{_yZd)yt-8&J6u4%WWFY-<D){LJ<OrD
z1q|;IXnIV4?0D`YmmQ2xyV|zbS}p9|q#z07UcBMp{Yz@61`Dd_QTvC5#8><>8+iUH
z!ir@It^cd;wcjLeFX-skJPbTruY>k{rf<ra(nb@f_T$yk=vr?mK4Ug9n&$mNZ6D-~
zQ=?YY7|c-CBoJJR)OJh<lIjJX0D|Q+VZtbLG(S(?KLDmf6YQq9E;AecFtE+&*(K&F
z^Im?E2>ofPH2nxO1v7yQr)Pp%kKSt*4qXATD(1{l88%DO1*V<D++iyF5^@eiTl~jH
z>*0INLeL>8(e3{;5SAmB-4Z3f;+A|9d$-qju<*v^H<!=+2ch8}XBy850000007*qo
IM6N<$f)Ai5Z2$lO

literal 0
HcmV?d00001

diff --git a/src/static/images/scan2.png b/src/static/images/scan2.png
new file mode 100644
index 0000000000000000000000000000000000000000..2fc3de1518a13591659cc61e36e3b0a67eb036b7
GIT binary patch
literal 2515
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

literal 0
HcmV?d00001

diff --git a/src/static/tabs/device_default.png b/src/static/tabs/device_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5d5007d00fcfdfcc78d930ac655284fc34f2a4a
GIT binary patch
literal 309
zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VV{wqX6T`Z5GB1G~mSQK*5Dp-y
z;YjHK^6z`PIEGmCUcGd&^N@qUv5)_Cq7RfUSbO8(&BjNHGYa@u9uR6e@hio`djks)
zy*-eA^6edG7ZVAeMIGl(A3ArgU-rj?yWR|Y&a-js=g&TMfhpm|f`%doi!BW@O@}XR
zTpA|izBn}a{O=rwqiv}I4L_59riR>kdiSD?`N@<`yW8)x@J>=HSugi&8~YY!=2=tf
zXFM;f=3mWHzvzAG+=o^Puf%U|*|=!V_ML35<xZb(tnd)$x-!jbvqqkz^v@SJ7S#V0
zm?tsYLhicMI%YdfvqoDc4!#1><g2R7jW^`m{QmTdeG!BA>PHd@O+c?Qc)I$ztaD0e
F0s#1!fhqt1

literal 0
HcmV?d00001

diff --git a/src/static/tabs/device_selected.png b/src/static/tabs/device_selected.png
new file mode 100644
index 0000000000000000000000000000000000000000..ead64a3b4bec8a1bbf1432e6a7b256d4bd0a1484
GIT binary patch
literal 359
zcmV-t0hs=YP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00001b5ch_0Itp)
z=>Px$AxT6*R5(w))VoRpK^O(#bB2V-dO;CWSexF$Bv#h?1lo9c0jo`F(<y{hzCcQS
zggk&236jDx)*?g^l+9vT_XsI;BUxmI#i?h$|DQQCLu5Rdv4;s*^}|CMwFwy40um(f
zXaZJh;Tfq0pht*r)+n_Ea9v_!3XFk+Uemj_1<Uo(z5%XM!LlFj7{)6}IFfgB*W&Z6
zVt;~_deA4hnOv;c>~>po9Vc*BhvU3=+dt>f3C!#aGfx@90K|)JhY(gll>YD9Z27^S
zfhkU<Y(6`^=E9RxD4AcI?b@gs%Pc3m3G;>S{RLm0I<yTX^`!_J5)5oXLGuLHep2?s
zV;Z$>q2Kcr^W^)3-8dZ-qW7HhhnriB^l(}Fa0b$L^99Is=+GdpxI_Q|002ovPDHLk
FV1f<en?C>m

literal 0
HcmV?d00001