water_affairs/pages/facility/index.vue

<template>
    <view>
        <cu-custom ref="custom" id="custom"
            bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
            :isBack="isBack">
            <block slot="backText">返回</block>
            <block slot="content">
                设备中心
            </block>
        </cu-custom>
        <My_search :heightReduction="heightReduction" ref="Search" @onFilter="onFilter" @startSearch="startSearch"
            :filter="filter">
            <template slot="left">
                <view class="change" hover-class="navigator-hover" @click="changePage(PageCur == '设备列表' ? '设备地图' : '设备列表')">
                    {{ PageCur == '设备列表' ? '列表' : '地图' }}
                </view>
            </template>
        </My_search>
        <list ref="设备列表" :tabHeight="tabHeight" :empty="empty" :list="list" v-show="PageCur == '设备列表'" />
        <my-map ref="设备地图" :tabHeight="tabHeight" :markers="markers" v-show="PageCur == '设备地图'" />
    </view>
</template>

<script>
import list from "./list.vue"
import myMap from "./my-map.vue";

export default {
    components: { list, myMap },
    props: {
        tabHeight: Number
    },
    name: "facility",
    data() {
        return {
            condition: "",
            empty: false,
            isBack: true,
            uninitialized: true,
            PageCur: "设备列表",
            list: [],
            markers: [],
            where: {
                condition: "",
                status: ""
            },
            filter: [{
                label: "状态",
                list: [{
                    status: '全部',
                    value: ""
                }, {
                    status: '在线',
                    value: "在线"
                }, {
                    status: '离线',
                    value: "离线"
                }, {
                    status: '禁用',
                    value: "禁用"
                }],
                key: "status",
                selectKey: "value",
                showKey: 'status',
                default: "0",
                selectIndex: 1,
            }],
            heightReduction: 0
        }
    },
    onLoad(options) {
        if (options.status) this.where.status = options.status;
        this.getlist();
        this.$Http.updateFacilityList = this.getlist.bind(this);
        setTimeout(() => this.loadElement(), 100)
    },
    methods: {
        init() {
            this.getlist();
            this.PageCur = '设备地图';
            this.isBack = false;
            this.heightReduction = 45
            setTimeout(() => this.loadElement(true, {
                mode: 'minus',
                num: 50
            }), 100)
        },
        changePage(page) {
            this.PageCur = page;
            this.loadElement()
        },
        loadElement(forcedUpdating, data) {
            let page = this.$refs[this.PageCur];
            if (page.uninitialized || forcedUpdating) page.init();
        },
        getlist() {
            return new Promise((resolve) => {
                this.$Http.basic({
                    "id": 20230711144102,
                    "content": {
                        nocache: true,
                        "pageNumber": 1,
                        "pageSize": 99999,
                        where: this.where
                    }
                }).then(res => {
                    console.log("设备列表", res)
                    if (this.cutoff(res.msg)) return;
                    resolve(res.msg == '成功')
                    this.empty = res.data.length == 0;
                    this.$refs.Search.onFinish();
                    this.markers = res.data.filter(v => v.latitude).map(v => {
                        v.id = v.w_deviceid - 0;
                        v.title = v.devicename;
                        if (this.usePort == 'h5') v.iconPath = require("../../static/img/location.png");
                        v.customCallout = { display: 'BYCLICK', anchorY: -10 }
                        return v
                    });
                    this.list = res.data.map(v => {
                        switch (v.status) {
                            case '在线':
                                v.bgColor = "#3C9CFF";
                                break;
                            case '禁用':
                                v.bgColor = "#F56C6C";
                                break;
                            default:
                                v.bgColor = "#F9AE3D";
                                break;
                        }
                        return v
                    })
                })
            })
        },
        startSearch(condition) {
            if (condition == this.where.condition) return;
            this.where.condition = condition;
            this.getlist()
        },
        onFilter(where) {
            console.log("开始筛选", where)
            where.condition = this.where.condition;
            this.where = where;
            this.getlist()
        },
    }
}
</script>

<style lang="scss" scoped>
/deep/.My_search {
    padding-left: 0 !important;
}

.change {
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 5px;
    font-size: 14px;
    color: #FFFFFF;
    border-radius: 4px;
    padding: 0 10px;
    margin-right: 5px;
    border-radius: 4px;
}
</style>