zdxtLawEnforcementCodeView/src/views/enforce/enterpriseWarningInfo.vue

<template>
	<div class="shop app_content">
		<!-- 导航栏 -->
		<div class="header_body">
			<header-nav :leftArrow="false" titelText="企业预警信息" />
		</div>
		
    <div class="search-button-date">
      <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" :classMap="classMap" @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.level==1" name="warning" color="red" size="30" style="margin-top: 2%;" />
										<van-icon v-else-if="item.level==2" name="warning" color="orange" size="30" style="margin-top: 2%;" />
										<van-icon v-else-if="item.level==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.num }}次</p>
									</div>
									<div class="card_box_span">
										<p style="padding-left: 30px;"><span class="card_box_label">预警级别：</span>
											{{ item.level==1?"Ⅰ级 (特别严重)":item.level==2?"Ⅱ级 (严重)": item.level==3?"Ⅲ级 (较重)": "Ⅳ (一般)"}}
										</p>
									</div>
								</div>
							</van-swipe-cell>
						</div>
					</div>
					<van-empty v-else class="no_data" description="暂无数据" />
				</refresh-list>
			</lodding-card>
		</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({
		//执法事件
		// 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'],
	});

	// 设置初始值为当前时间
	onMounted(() => {
		// getCard();
		searchParam.enterpriseNumber = useCommon.enterpriseNumber;
		queryList();
		data.dateSearch = nowDate(new Date());
	});
	const queryList = () =>{
		queryEarlyWarning(searchParam,success =>{
			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;
	};

	onMounted(async () => {
		queryList();
		isLodding.value = false;
	});

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

	const onDateConfirm = (value)=> {
		console.log(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]
    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) =>{
		searchParam.dateType =  val;
		searchParam.isComplaint =  null;
		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{
						font-size: 13px;
						padding-left: 5%;
						height: 35px;
						align-items: center;
						display: flex;
						align-items: center;
					}
					.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: 80%;
		}
	}
	.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>