设备列表

packageA/facility/modules/list.vue

@@ -0,0 +1,142 @@
+<template>
+    <view>
+        <My_search @openFilter="openFilter" @startSearch="startSearch" />
+        <My_listbox ref="List" @getlist="getlist" :empty='empty'>
+            <navigator v-for="item in list" :key="item.w_deviceid" class="item"
+                :url="'/packageA/facility/detail?id=' + item.w_deviceid">
+                <view class="name u-line-1">设备：{{ item.devicename || ' --' }}</view>
+                <view class="row u-line-1">设备编号：<text>{{ item.serialnumber || ' --' }}</text></view>
+                <view class="row u-line-1">设备地址：<text>{{ (item.province + item.city + item.county + item.address) || ' --'
+                }}</text>
+                </view>
+                <view class="status" :style="{ background: item.bgColor }">{{ item.status }}</view>
+            </navigator>
+            <view v-if="istabbar" class="cu-bar tabbar" />
+        </My_listbox>
+    </view>
+</template>
+<script>
+export default {
+    props: {
+        istabbar: Boolean
+    },
+    name: "list",
+    data() {
+        return {
+            empty: false,
+            list: [],
+            uninitialized: true,
+            "content": {
+                "pageNumber": 1,
+                "pageTotal": 1,
+                "pageSize": 20,
+                "where": {
+                    "condition": "",
+                    "status": ""
+                }
+            }
+        }
+    },
+    methods: {
+        init(forcedUpdating = true) {
+            this.uninitialized = false;
+            this.getlist(forcedUpdating);
+        },
+        getlist(init) {
+            let content = this.content;
+            if (init) {
+                content.pageNumber = 1;
+                content.pageTotal = 1;
+            }
+            if (content.pageNumber > content.pageTotal) return;
+            this.$Http.basic({
+                "id": 20230615153202,
+                content
+            }).then(res => {
+                console.log("设备列表", res)
+                if (this.cutoff(res.msg)) return;
+                this.$refs.List.RefreshToComplete();
+                this.$refs.List.setHeight();
+                this.empty = !res.data.length;
+                content.pageNumber = res.pageNumber + 1;
+                content.pageTotal = res.pageTotal;
+                res.data = res.data.map(v => {
+                    switch (v.status) {
+                        case '在线':
+                            v.bgColor = "#3874F6";
+                            break;
+                        case '禁用':
+                            v.bgColor = "#EB4B5C";
+                            break;
+                        default:
+                            v.bgColor = "#BBBBBB";
+                            break;
+                    }
+                    return v
+                })
+                this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data)
+                this.content = content;
+            })
+        },
+        startSearch(condition) {
+            if (condition == this.content.where.condition) return;
+            this.content.where.condition = condition;
+            this.getlist(true)
+        },
+        openFilter(e) {
+            console.log("开始筛选", e)
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.item {
+    position: relative;
+    width: 355px;
+    background: #FFFFFF;
+    border-radius: 4px;
+    margin: 5px auto;
+    margin-bottom: 10px;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .name {
+        width: 300px;
+        line-height: 21px;
+        font-size: 15px;
+        font-family: PingFang SC-Medium, PingFang SC;
+        font-weight: bold;
+        color: #333333;
+        margin-bottom: 10px;
+    }
+
+    .row {
+        line-height: 17px;
+        font-size: 12px;
+        color: #666666;
+        margin-bottom: 5px;
+
+        text {
+            line-height: 17px;
+            font-size: 12px;
+            color: #0A3971;
+        }
+    }
+
+    .status {
+        position: absolute;
+        right: 0;
+        top: 0;
+        border-radius: 0px 4px 0px 4px;
+        background: red;
+        text-align: center;
+        line-height: 24px;
+        padding: 0 10px;
+        font-size: 12px;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #FFFFFF;
+    }
+}
+</style>