06设备控制页信号强度

control/components/prodnum-06/prodnum-06.vue

@@ -73,6 +73,12 @@ export default {
                 } catch (error) {
                     console.error("06控制模式", error)
                 }
+                try {
+                    this.$Http.openNetwork(newVal.params.RSSI.lastvalue)
+                } catch (error) {
+                    setTimeout(this.$Http.openNetwork(newVal.params.RSSI.lastvalue), 100)
+                    console.error("06信号强度", error)
+                };
             } else {
 
             }

pages/facility/detail.vue

@@ -22,7 +22,7 @@
                     最近上线时间：{{ detail.lastconnecttime || ' --' }}
                 </view>
             </view>
-            <preview-image :attinfos="detail.attinfos" />
+            <preview-image ref="轮播图" :attinfos="detail.attinfos" />
             <view class="ceiling" :style="{ top: tovw(CustomBar) }">
                 <horizontal-direction ref="hd" />
             </view>
@@ -71,12 +71,19 @@ export default {
     },
     onLoad(options) {
         this.w_deviceid = options.id;
-        this.getDetail(true)
     },
     mounted() {
         this.CustomBar = -10;
         this.$refs.List.setHeight();
     },
+    onShow() {
+        this.getDetail(true)
+        try {
+            this.$Http.openNetwork = this.$refs.轮播图.openNetwork;
+        } catch (error) {
+            setTimeout(() => { this.$Http.openNetwork = this.$refs.轮播图.openNetwork; }, 100)
+        };
+    },
     methods: {
         getDetail(init = false) {
             this.$Http.basic({
@@ -88,7 +95,6 @@ export default {
             }).then(res => {
                 console.log("设备详情", res)
                 if (this.cutoff(res.msg)) return;
-
                 if (!res.data.miniapppath) {
                     res.data.miniapppath = require("../../control/pages").getPageName(res.data.prodnum);
                     if (!res.data.miniapppath) {
@@ -97,9 +103,6 @@ export default {
                         this.tabs.shift()
                     }
                 }
-
-                console.log(res.data.miniapppath)
-
                 switch (res.data.status) {
                     case '在线':
                         res.data.bgColor = "#007aff";
@@ -111,9 +114,7 @@ export default {
                         res.data.bgColor = "#F9AE3D";
                         break;
                 }
-
                 this.detail = res.data;
-
                 if (init) {
                     let prodnum = res.data.prodnum;
                     if (res.data.miniapppath) prodnum = res.data.miniapppath.split("-")[1];

pages/facility/modules/network.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class="test">
+        <view v-if="tips" class="text">{{ tips }}</view>
+        <view class="box">
+            <view class='item'><text v-if="num >= 10" /></view>
+            <view class='item'><text v-if="num >= 20" /></view>
+            <view class='item'><text v-if="num >= 30" /></view>
+            <view class='item'><text v-if="num >= 40" /></view>
+            <view class='item'><text v-if="num >= 50" /></view>
+            <view class='item'><text v-if="num >= 60" /></view>
+            <view class='item'><text v-if="num >= 70" /></view>
+            <view class='item'><text v-if="num >= 80" /></view>
+            <view class='item'><text v-if="num >= 90" /></view>
+            <view class='item'><text v-if="num >= 100" /></view>
+        </view>
+    </div>
+</template>
+  
+<script>
+export default {
+    name: 'network',
+    props: {
+        num: {
+            type: [String, Number],
+            default: 0
+        },
+        tips: {
+            type: String,
+        }
+    }
+}
+</script>
+  
+<style lang="less" scoped>
+.test {
+    position: absolute;
+    display: flex;
+    top: 10px;
+    left: 14px;
+
+    .text {
+        color: #fff;
+        font-size: 12px;
+        margin-top: 4px;
+    }
+
+    .box {
+        width: 40px;
+        height: 20px;
+        display: flex;
+        justify-content: space-around;
+        overflow: hidden;
+        padding: 0;
+
+        .item {
+            width: 8%;
+            border-radius: 2px;
+            background: rgba(0, 0, 0, 0.5);
+            position: relative;
+
+            text {
+                position: absolute;
+                top: 0;
+                left: 0;
+                display: inline-block;
+                width: 100%;
+                height: 100%;
+                background: limegreen;
+            }
+
+            &:nth-child(1) {
+                height: 4px;
+                margin-top: 18px;
+
+                text {
+                    background: rgb(255, 0, 0);
+                }
+            }
+
+            &:nth-child(2) {
+                height: 6px;
+                margin-top: 16px;
+
+                text {
+                    background: rgb(255, 50, 0);
+                }
+            }
+
+            &:nth-child(3) {
+                height: 8px;
+                margin-top: 14px;
+
+                text {
+                    background: rgb(255, 90, 0);
+                }
+            }
+
+            &:nth-child(4) {
+                height: 10px;
+                margin-top: 12px;
+
+                text {
+                    background: rgb(255, 130, 0);
+                }
+            }
+
+            &:nth-child(5) {
+                height: 12px;
+                margin-top: 10px;
+            }
+
+            &:nth-child(6) {
+                height: 14px;
+                margin-top: 8px;
+            }
+
+            &:nth-child(7) {
+                height: 16px;
+                margin-top: 6px;
+            }
+
+            &:nth-child(8) {
+                height: 18px;
+                margin-top: 4px;
+            }
+
+            &:nth-child(9) {
+                height: 20px;
+                margin-top: 2px;
+            }
+
+            &:nth-child(10) {
+                height: 22px;
+                margin-top: 0px;
+            }
+        }
+    }
+}
+</style>

pages/facility/modules/previewImage.vue

@@ -1,5 +1,6 @@
 <template>
     <view class="container">
+        <network v-if="network.show" :num="network.num" :tips="network.tips" />
         <swiper v-if="list.length" class="swiper" :indicator-dots="list.length > 1" :circular="true" indicator-color="#999"
             indicator-active-color="#fff">
             <swiper-item v-for="(item, index) in list" @click="preview(index)" :key="item.url">
@@ -8,16 +9,22 @@
         </swiper>
     </view>
 </template>
-
 <script>
+import network from './network.vue'
 export default {
     name: "prodnum-06",
+    components: { network },
     props: {
         attinfos: Array
     },
     data() {
         return {
-            list: []
+            list: [],
+            network: {
+                show: false,
+                num: 0,
+                tips: ""
+            }
         }
     },
     watch: {
@@ -27,8 +34,6 @@ export default {
     },
     methods: {
         preview(index) {
-            console.log(index)
-
             uni.previewImage({
                 current: index,
                 urls: this.list.map(v => v.url),
@@ -44,6 +49,13 @@ export default {
                     }
                 }
             });
+        },
+        openNetwork(num = 0, tips = '信号强度：') {
+            this.network = {
+                show: true,
+                num,
+                tips
+            }
         }
     },
 }
@@ -51,6 +63,8 @@ export default {
 
 <style lang="scss" scoped>
 .container {
+    position: relative;
+
     .swiper {
         width: 355px;
         height: 158px;