water_affairs/pages/alerts/index.vue

<template>
    <view>
        <cu-custom id="custom"
            bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
            :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">
                告警中心
            </block>
        </cu-custom>
        <u-tabs :list="list1" :activeStyle="{ fontWeight: 'bold' }" @change="tabChange">
            <navigator url="#" slot="right" class="right" @tap="openSearch">
                <view :style="{ color: showSearch ? '#007aff' : '#fff' }" class="iconfont icon-a-sousuolansousuo" />
            </navigator>
        </u-tabs>
        <u-transition :show="showSearch" mode="fade-down">
            <My_search ref="Search" :focus="focus" @onFilter="onFilter" :dateRange="true" @startSearch="startSearch" />
        </u-transition>
        <view style="height: 5px;" v-if="!focus" />
        <My_listbox ref="List" @getlist="getlist" :empty='empty'>
            <List :list="list" />
        </My_listbox>
    </view>
</template>

<script>
import List from "./modules/list.vue"
export default {
    name: "alerts",
    components: { List },
    data() {
        return {
            showSearch: true,
            empty: true,
            list1: [{
                name: '待处理',
                badge: {
                    value: 0,
                }
            }, {
                name: '已处理',
                badge: {
                    value: 0,
                }
            }],
            content: {
                pageNumber: 1,
                pageTotal: 1,
                pageSize: 20,
                isWeChat: true,
                where: {
                    condition: "",
                    buildtype: "",
                    level: "",
                    status: "待处理",
                    begindate: "",
                    enddate: ""
                }
            },
            focus: false,
            list: []
        }
    },
    mounted() {
        this.getlist(true);
        setTimeout(() => {
            this.$refs.List.setHeight();
        }, 350)
    },
    methods: {
        getlist(init) {
            let content = this.content;
            if (init) {
                content.pageNumber = 1;
                content.pageTotal = 1;
            }
            if (content.pageNumber > content.pageTotal) return;
            this.$Http.basic({
                "id": 20230816095802,
                content
            }).then(res => {
                console.log("告警列表", res)
                if (this.cutoff(res.msg)) return;
                this.$refs.List.RefreshToComplete();
                this.$refs.List.setHeight();
                this.$refs.Search.onFinish();
                this.empty = !res.data.length;
                content.pageNumber = res.pageNumber + 1;
                content.pageTotal = res.pageTotal;
                try {
                    this.list1[0].badge.value = res.tips.undeal.count;
                    this.list1[1].badge.value = res.tips.deal.count;
                } catch (error) {

                }
                this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data)
                this.content = content;
            })
        },
        openSearch() {
            this.showSearch = !this.showSearch;
            setTimeout(() => {
                this.$refs.List.setHeight();
                this.focus = this.showSearch;
            }, 350)
        },
        tabChange(e) {
            this.content.where.status = e.name;
            this.getlist(true)
        },
        startSearch(condition) {
            if (condition == this.content.where.condition) return;
            this.content.where.condition = condition;
            this.getlist(true)
        },
        onFilter(e) {
            this.content.where = Object.assign(this.content.where, e);
            console.log(this.content.where)
            this.getlist(true);
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/.u-tabs {
    height: 44px;
    // background: #052E5D;

    .u-tabs__wrapper__nav {
        height: 44px;

        .u-tabs__wrapper__nav__item {
            height: 44px !important;

            .u-tabs__wrapper__nav__item__text {
                color: #fff !important;
            }
        }
    }
}

.right {
    height: 44px;
    line-height: 44px;
    width: 44px;
    text-align: center;

    .iconfont {
        font-size: 16px;
    }
}
</style>