zdxtLawEnforcementCodeView/src/views/enforce/earlyWarning.vue

<template>
    <div class="shop app_content">
        <!-- 导航栏 -->
        <!-- <div class="header_body">
            <header-nav :leftArrow="false" titelText="预警信息"/>
        </div>-->
        <van-search v-model="searchParam.searchValue" show-action placeholder="企业名称" @search="onSearch">
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>
        <div class="search-button-list">
            <van-button plain hairline :class="null==data.checkNum?'search-button active':'search-button'" @click="searchDateType(null)" round type="primary" size="mini">全部</van-button>
            <van-button plain hairline :class="1==data.checkNum?'search-button active':'search-button'" @click="searchDateType(1)" round type="primary" size="mini">本月</van-button>
            <van-button plain hairline :class="2==data.checkNum?'search-button active':'search-button'" @click="searchDateType(2)" round type="primary" size="mini">本季</van-button>
            <van-button plain hairline :class="3==data.checkNum?'search-button active':'search-button'" @click="searchDateType(3)" round type="primary" size="mini">本年</van-button>
            <van-button plain hairline :class="9==data.checkNum?'search-button active':'search-button'" @click="selectDate" round type="primary" size="mini">筛选</van-button>
        </div>
        <div class="search-button-date">
            <span class="date-select" v-show="data.dateShow" @click="selectDate">{{  data.dateSearch }}</span>
            <div style="border-color: black;" class="van-hairline--bottom"></div>
            <van-popup v-model:show="data.showDatePicker" position="bottom">
                <van-date-picker
                        title="选择日期"
                        v-model="data.currentDate"
                        :min-date="data.minDate"
                        :max-date="data.maxDate"
                        :columns-type="data.columnsType"
                        @confirm="onDateConfirm"
                        @cancel="cancelSelectDate"
                />
            </van-popup>
        </div>

        <!-- 中间 -->
        <div class="shop-center">
            <lodding-card :isLodding="isLodding">
                <refresh-list v-model:freshMap="freshMap" @refresh="onRefresh" @onLoad="onLoad"
                              :resetScroll="resetScroll" class="refresh_box">
                    <div class="refresh_content" v-if="data?.dataList.length">
                        <div class="goods_box" v-for="(item, index) in data?.dataList" :key="index">
                            <van-swipe-cell class="swipe_cell">
                                <div class="card_box">

                                    <div class="card_box_span">
                                        <p>{{ item.createTime }}
                                        </p>
                                    </div>
                                    <!--									 <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa',padding: '0 5px' }" />-->
                                    <div style="border-color: aqua; border: 2px;" class="van-hairline--bottom"></div>
                                    <div class="card_box_span" style="padding-left: 1%;">
                                        <van-icon v-if="item.warningLevel==1" name="warning" color="red" size="30"
                                                  style="margin-top: 2%;"/>
                                        <van-icon v-else-if="item.warningLevel==2" name="warning" color="#ed6a0c"
                                                  size="30" style="margin-top: 2%;"/>
                                        <van-icon v-else-if="item.warningLevel==3" name="warning" color="#fed200"
                                                  size="30" style="margin-top: 2%;"/>
                                        <van-icon v-else name="info" size="30" color="#fed200" style="margin-top: 2%;"/>
                                        <p style="padding-left: 15px; font-size: 16px;font-weight: bold;">{{
                                            item.enterpriseName }}</p>
                                    </div>
                                    <div class="card_box_span">
                                        <p style="padding-left: 30px;"><span class="card_box_label">预警原因：</span> {{
                                            item.warningCause }}</p>
                                    </div>
                                    <div class="card_box_span">
                                        <p style="padding-left: 30px;"><span class="card_box_label">预警级别：</span>
                                            {{ item.warningLevel==1?"Ⅰ级 (特别严重)":item.warningLevel==2?"Ⅱ级 (严重)":
                                            item.warningLevel==3?"Ⅲ级 (较重)": "Ⅳ (一般)"}}
                                        </p>
                                    </div>
                                </div>
                            </van-swipe-cell>
                        </div>
                    </div>
                    <van-empty v-else class="no_data" description="暂无数据"/>
                </refresh-list>
            </lodding-card>
        </div>

        <!-- 底部 -->
        <div class="shop_footer_body">
            <footer-enforcement-nav></footer-enforcement-nav>
        </div>
    </div>
</template>

<script setup name="registrationList">
    import {showToast} from "vant";
    import {queryEarlyWarning} from '../../api/enforce';
    import {setGoodsNum} from "@/util/util";

    const {useCommon, useShopCard} = $globalStore;

    const router = useRouter();
    let allchecked = ref(false); // 是否全选
    let refreshLoad = ref(false); // 是否加载中
    let value = ref('')
    let totalPrice = ref(0); // 总钱数

    let searchParam = reactive({
        "dataScopeId": useCommon.userId,
        //执法事件
        // lawEnforcementIncident:"",
        //执法部门
        lawEnforcement: "",
        //搜索框
        searchValue: ref(''),
        //时间类型
        dateType: null,
        //是否投诉
        isComplaint: null,
        //企业统一信用码
        enterpriseNumber: ref(useCommon.enterpriseNumber),
        //搜索时间
        searchDate: ref()
    });

    const data = reactive({
        cartList: [],
        dataList: [],
        dateSearch: ref(),
        showDatePicker: false,
        currentDate: ref(['2024', '01']),
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2125, 5, 1),
        columnsType: ['year', 'month'],
        dateShow: false,
        checkNum: null
    });

    // 设置初始值为当前时间
    onMounted(() => {
        // getCard();
        searchParam.enterpriseNumber = useCommon.enterpriseNumber;
        queryList();
        data.dateSearch = nowDate(new Date());
        isLodding.value = false;
    });
    const queryList = () => {
        queryEarlyWarning(searchParam, success => {
            console.log(success.data);
            data.dataList = success.data;
        }, error => {

        })
    }

    const onSearch = (val) => {
        queryEarlyWarning(
            {
                "searchValue": searchParam.searchValue
            }
            , success => {
                data.dataList = success.data;
            }, error => {

            })
    };
    const onClickButton = () => {
        queryList();
    }

    const toComplaintView = (id, name) => {
        router.push(
            {
                path: "/enterprise/complaint",
                query: {
                    id: id,
                    lawEnforcementIncident: name
                }
            });
    }
    onActivated(() => {
    });

    onDeactivated(() => {

    });

    // 返回
    const goBack = () => {
        router.push({
            path: "/enforceHome"
        });
    };

    let resetScroll = ref(0); // 滚动记录
    let isLodding = ref(true); // 是否加载中
    let freshMap = reactive({
        refreshLoad: false, // 是否刷新
        listLoading: false, // 是否加载中
        listFinished: false, // 是否加载完成标识
    });


    //下拉刷新
    const onRefresh = () => {
        freshMap.listFinished = false;
        freshMap.listLoading = true;
        getGoodslist();
    };

    // 触底加载
    const onLoad = () => {
        freshMap.listFinished = true;
        getGoodslist(true);
    };


    //获取分类下的商品列表
    const getGoodslist = async (onLoad) => {
        // const res = await useClassify.classifyGoods();
        // if (res?.code === 20000) {
        // 	goodsList = onLoad ? goodsList.concat(res?.data) : res?.data;
        // 	freshMap.refreshLoad = false;
        // 	freshMap.listLoading = false;
        // 	freshMap.listFinished = res?.listFinished;
        // 	if (goodsList.length > 50) {
        // 		freshMap.listFinished = true;
        // 	}
        // }
        freshMap.refreshLoad = false;
        freshMap.listLoading = false;
        freshMap.listFinished = true;
        isLodding.value = false;
    };

    const selectDate = () => {
        data.checkNum = 9;
        data.showDatePicker = true;
        console.log(data.showDatePicker)
    }

    const onDateConfirm = (value) => {
        value.selectedValues.forEach((item, index) => {
            console.log(item);
        });
        data.dateSearch = value.selectedValues[0] + "/" + value.selectedValues[1]
        data.showDatePicker = false;
        searchParam.searchDate = value.selectedValues[0] + "-" + value.selectedValues[1]
        data.dateShow = true;
        queryList();
    }
    const nowDate = (time) => {
        var year = time.getFullYear(); // 年
        var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
        var date = time.getDate().toString().padStart(2, '0'); // 日
        var hour = time.getHours().toString().padStart(2, '0'); // 时
        var minute = time.getMinutes().toString().padStart(2, '0'); // 分
        var second = time.getSeconds().toString().padStart(2, '0'); // 秒
        return (
            year + "/" + month
        )
    }


    const searchDateType = (val) => {
        data.checkNum = val;
        searchParam.searchDate = null;
        searchParam.dateType = val;
        searchParam.isComplaint = null;
        data.dateShow = false;
        queryList();
    }
    const searchComplaint = (val) => {
        searchParam.isComplaint = val;
        searchParam.dateType = null;
        queryList();
    }
</script>

<style lang="less" scoped>
    .card_box_label {
        color: rgba(128, 128, 128, 0.5);
    }

    .shop {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: #f4f4f4;

        .header_body {
            height: 50px;
        }

        .shop-center {
            flex: 1;
            overflow-y: scroll;
            position: relative;

            .goods_box {
                display: flex;
                background-color: #fff;
                margin: 6px;
                border-radius: 10px;

                .swipe_cell {
                    width: 100%;
                }

                .card_box {
                    display: flex;
                    width: 100%;
                    padding: 10px 0px;
                    flex-direction: column;

                    .card_body {
                        background-color: #fff;
                        border-radius: 10px;
                        flex: 1;
                    }

                    .card_box_span {
                        display: flex;
                        align-items: center;
                        margin: 2% 0;
                        padding-left: 3%;
                        font-size: 0.38rem;
                        line-height: 1.5;

                        p {
                            margin: 0;
                        }
                    }

                    .card_box_action {
                        position: absolute;
                        right: 4%;
                    }
                }
            }
        }

        .shop_footer_body {
            height: 101px;
            position: relative;

            .footer-one-btn {
                height: 50px;
                bottom: 51px;
            }
        }
    }

    .search-button-list {
        height: 3%;
        display: flex;
        flex-direction: row;
        padding-left: 10px;
        margin-top: 6px;
        align-items: end;

        .search-button {
            width: 15%;
            height: 90%;
        }

        .search-button.active {
            background-color: #1367fe;
            color: #fff;
        }
    }

    .search-button-date {
        height: 3%;
        display: flex;
        flex-direction: row;
        padding-left: 10px;
        margin-top: 6px;
        align-items: end;
        position: relative;

        .date-select {
            font-size: 20px;
            margin-left: 2%;
        }

        .search-button {
            width: 15%;
            height: 80%;
            position: absolute;
            top: 1%;
            right: 1%;
        }
    }

</style>