You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

926 lines
28 KiB

<template>
<div class="home app_content">
<!-- 导航栏 -->
<!-- <div class="header_body">
<header-nav :leftArrow="false" titelText="预警信息"/>
</div>-->
<van-search
v-model="searchParam.searchValue"
show-action
placeholder="企业名称"
clearable="true"
clear-icon="clear"
clear-trigger="always"
@clear="clearSearch"
@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>-->
<van-button plain hairline :class="8==data.checkNum?'search-button active':'search-button'"
@click="dateAnyway" round type="primary" size="mini">自定义
</van-button>
<van-button plain hairline :class="10==data.checkNum?'search-button active':'search-button'"
@click="selectNum" round type="primary" size="mini">次数
</van-button>
</div>
<div class="search-button-date">
<span class="date-select" v-show="data.dateShow" @click="selectDate"></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="search-button-date">
<span class="date-select" v-show="data.dateShow" @click="dateAnyway"></span>
<div style="border-color: black;" class="van-hairline--bottom"></div>
<van-popup v-model:show="data.showCalendarPicker" position="bottom">
<van-calendar
title="选择时间"
color="#3f7aff"
:poppable="false"
type="range"
@confirm="onCalendarConfirm"
:min-date="data.minDate"
:max-date="data.maxDate"
allow-same-day="true"
:style="{ height: '80vh' }">
</van-calendar>
<van-button @click="cancelCalendar" size="mini" class="btn-rt">清空时间</van-button>
</van-popup>
</div>
<div class="search-button-date">
<span class="date-select" v-show="data.dateShow" @click="selectNum"></span>
<div style="border-color: black;" class="van-hairline--bottom"></div>
<van-popup v-model:show="data.showNumPicker" position="bottom">
<div class="count-inspect">
被执法次数:
<van-field v-model="searchParam.numLeft" />
<span style="padding: 10px">-</span>
<van-field v-model="searchParam.numRight" />
</div>
<div class="btn-bottom">
<van-button slot="button" type="primary" size="small" @click="confirmNum">确定</van-button>
<van-button slot="button" type="default" size="small" @click="cancelNum">取消</van-button>
</div>
</van-popup>
</div>
<div class="warning-rule" style="margin-top: -8px">
<span><van-icon name="warning-o"/></span><span>{{data.warnText}}</span>
</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">-->
<van-pull-refresh v-model="data.refreshing" @refresh="onRefresh">
<van-list v-model:loading="data.loading" :finished="data.finished" finished-text="没有更多了" @load="onLoad">
<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>{{ formattedTimeYYYYmmdd(item.createTime) }}
</p>
</div>
<!-- <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa',padding: '0 5px' }" />-->
<div class="van-hairline--bottom"></div>
<div class="card_box_span card-title">
<p :style="{marginLeft: '25px' }">{{item.enterpriseName }}</p>
</div>
<div class="card_box_span">
<p class="warn-cont"><span class="card_box_label">被执法次数:</span> {{
item.num }}次</p>
</div>
<!-- <div class="card_box_span">-->
<!-- <p class="warn-cont"><span class="card_box_label">执法单位:</span>-->
<!-- {{ item.warningLevel==1?"Ⅰ级 (严重)":item.warningLevel==2?"Ⅱ级 (较重)":-->
<!-- item.warningLevel==3?"Ⅲ级 (一般)": "Ⅳ (一般)"}}-->
<!-- </p>-->
<!-- </div>-->
<!-- 进度条 -->
<div :class="item.show? 'new_detail' : 'work_detail'">
<div class="timbox">
<div :class="'progress-box level-0'" v-for="(t,index) in warnListInfoList" :key="index">
<!-- <div class="timtit">{{ t.lawEnforcementItemText }}</div> -->
<div class="timtit">{{ t.enforcementTime }}</div>
<!-- <div class="prolist"><label>执法时间:</label><span>{{ t.createTime }}</span></div> -->
<div class="prolist"><label>执法单位:</label><span>{{ t.bureauDeptName }}</span></div>
</div>
</div>
</div>
<div class="look_all" @click="selectByEnterpriseNumber(item.enterpriseNumber,item.createTime,item.id,item.show)" :class="{ new_up: !item.show }">
<van-icon v-if="!item.show" name="arrow-down" />
<van-icon v-else name="arrow-up" />
</div>
</div>
</van-swipe-cell>
</div>
</van-list>
</van-pull-refresh>
<!-- </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 {
queryRegistrationListNew,
queryRegistrationByEpId
} from '@/api/enforce';
import { formattedTimeYYYYmmdd } from'@/util/util';
import {queryTotal} from "@/api/enforce/administrative";
const {useCommon, useShopCard} = $globalStore;
//注意的点vant默认的是text,如果你需要修改需要value-key="你要定义的名字",否则不会渲染
//const columns= ['杭州', '宁波', '温州', '嘉兴', '湖州'];
const router = useRouter();
let allchecked = ref(false); // 是否全选
let refreshLoad = ref(false); // 是否加载中
let value = ref('')
let totalPrice = ref(0); // 总钱数
//存放获取预警进度数据
const warnListInfoList = ref([]);
let searchParam = reactive({
// userId: useCommon.userId,
"dataScopeId": useCommon.userId,
// 分页
pageNum: 1,
pageSize: 6,
//执法事件
// lawEnforcementIncident:"",
//执法单位
lawEnforcement: "",
//搜索框
searchValue: ref(''),
//时间类型
dateType: null,
//是否投诉
isComplaint: null,
//企业统一信用码
enterpriseNumber: "",
//搜索时间
dateSearch: ref(),
//搜索次数
numLeft: null,
numRight: null,
//自定义时间
beginTime: null,
endTime: null,
warnType: 1,
});
const data = reactive({
cartList: [],
dataList: [],
dateSearch: ref(),
showDatePicker: false,
showCalendarPicker: false,
currentDate: ref(['2025', '01']),
minDate: new Date(2020, 0, 1),
maxDate: new Date(2125, 5, 1),
columnsType: ['year', 'month'],
dateShow: false,
checkNum: null,
loading: false,
finished: false,
refreshing: false,
curPage: 1,
total: 0,
is_show: false,
isSelectTime: false,
isSelectNum: false,
warnText:""
});
// 设置初始值为当前时间
onMounted(() => {
// getCard();
// searchParam.enterpriseNumber = useCommon.enterpriseNumber;
queryList();
data.dateSearch = nowDate(new Date());
isLodding.value = false;
});
const queryList = () => {
//默认展示前30个自然日
if (searchParam.numLeft==null && searchParam.numRight==null
&& searchParam.beginTime==null && searchParam.endTime==null) {
const formatDate = (date) =>
`${date.getFullYear()}-${date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1)
: date.getMonth()+1}-${date.getDate() < 10 ? '0'+date.getDate() : date.getDate()}`;
searchParam.beginTime = formatDate(new Date(new Date().setDate(new Date().getDate() - 30)));
searchParam.endTime = formatDate(new Date());
}
searchParam.pageNum = (data.curPage-1)*searchParam.pageSize;
// if (null!=searchParam.searchValue && searchParam.searchValue.length>0) {
queryRegistrationListNew(searchParam, success => {
if (data.isSelectTime && data.isSelectNum) {
data.warnText = "搜索时间为"+searchParam.beginTime+"至"+searchParam.endTime+
";搜索次数为"+searchParam.numLeft+"至"+searchParam.numRight;
} else if (data.isSelectTime) {
data.warnText = "搜索时间为"+searchParam.beginTime+"至"+searchParam.endTime+";搜索次数为全部";
}else if (data.isSelectNum) {
data.warnText = "近30天 搜索次数为"+searchParam.numLeft+"至"+searchParam.numRight;
}else {
data.warnText = "请输入关键字进行查询";
// data.warnText = "近30天 被执法数量:"+success.total+"家 总计执法次数:"+success.msg+"次";
}
if (!data.isSelectTime && (searchParam.searchValue==null || searchParam.searchValue==="")) {
success.total= 0;
success.rows= new Array();
}
data.curPage++;
data.loading = false; // 查4出结果停止加载
if (success.total <= data.dataList.length) {
// 查到最后没数据
data.finished = ref(true);
// searchParam.numLeft = null;
// searchParam.numRight = null;
// searchParam.beginTime = null;
// searchParam.endTime =null;
return;
}
// data.dataList = success.data;
data.dataList.push(...success.rows);
}, error => {
})
// }
}
const onSearch = (val) => {
queryRegistrationListNew(
{
"searchValue": searchParam.searchValue
}
, success => {
data.dataList = success.data;
}, error => {
})
};
const onClickButton = () => {
data.curPage = 1;
data.dataList = [];
onRefresh();
}
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 clearSearch = () =>{
// 清空列表数据
data.dataList = [];
// data.finished = false;
// 重新加载数据
// 将 loading 设置为 true,表示处于加载状态
// data.loading = true;
searchParam.pageNum = 0;
data.curPage = 1;
data.refreshing = false;
data.finished = false;
data.loading = true;
onLoad();
}
//下拉刷新
const onRefresh = () => {
// 清空列表数据
data.dataList = [];
// data.finished = false;
// 重新加载数据
// 将 loading 设置为 true,表示处于加载状态
// data.loading = true;
searchParam.pageNum = 0;
data.curPage = 1;
data.refreshing = false;
data.finished = false;
data.loading = true;
onLoad();
};
// 触底加载
const onLoad = () => {
setTimeout(() => {
if (data.refreshing) {
data.refreshing = false;
}
queryList();
}, 1000);
};
//获取分类下的商品列表
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 dateAnyway = () => {
searchParam.dateType = 4;
data.checkNum = 8;
data.showCalendarPicker = true;
}
const selectDate = () => {
searchParam.dateType = 4;
data.checkNum = 9;
data.showDatePicker = true;
}
const selectNum = () => {
searchParam.dateSearch = null;
searchParam.dateType = 4;
data.checkNum = 10;
data.showNumPicker = true;
}
const onDateConfirm = (value) => {
value.selectedValues.forEach((item, index) => {
console.log(item);
});
data.dateSearch = value.selectedValues[0] + "/" + value.selectedValues[1]
data.showDatePicker = false;
searchParam.dateSearch = value.selectedValues[0] + "-" + value.selectedValues[1]
data.dateShow = true;
data.curPage = 1;
data.dataList = [];
onRefresh();
}
const onCalendarConfirm = (values) => {
const formatDate = (date) =>
`${date.getFullYear()}-${date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1)
: date.getMonth()+1}-${date.getDate() < 10 ? '0'+date.getDate() : date.getDate()}`;
const [start, end] = values;
searchParam.beginTime =formatDate(start);
searchParam.endTime = formatDate(end);
data.showCalendarPicker = false;
data.dateShow = true;
data.isSelectTime = true;
data.curPage = 1;
data.dataList = [];
onRefresh();
}
const cancelCalendar = (value) => {
data.showCalendarPicker = false;
data.isSelectTime = false;
const formatDate = (date) =>
`${date.getFullYear()}-${date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1)
: date.getMonth()+1}-${date.getDate() < 10 ? '0'+date.getDate() : date.getDate()}`;
searchParam.beginTime = formatDate(new Date(new Date().setDate(new Date().getDate() - 30)));
searchParam.endTime = formatDate(new Date());
onRefresh();
}
const confirmNum = (value) => {
data.showNumPicker = false;
data.isSelectNum = true;
data.curPage = 1;
data.dataList = [];
onRefresh();
}
const cancelNum = (value) => {
data.showNumPicker = false;
data.isSelectNum = false;
searchParam.numLeft=null;
searchParam.numRight=null;
onRefresh();
}
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.dateSearch = null;
searchParam.dateType = val;
searchParam.isComplaint = null;
data.dateShow = false;
data.curPage = 1;
data.dataList = [];
onRefresh();
}
const searchComplaint = (val) => {
searchParam.isComplaint = val;
searchParam.dateType = null;
data.curPage = 1;
data.dataList = [];
onRefresh();
}
const selectByEnterpriseNumber = (val,time,id,show) =>{
searchParam.enterpriseNumber = val;
// todo 需要添加判断
// if(show){return}
queryRegistrationByEpId(searchParam,success =>{
console.log(success.data)
warnListInfoList.value = success.data;
for (let index = 0; index < data.dataList.length; index++) {
const element = data.dataList[index];
if(element.id == id){
// if(element.show){
// element.show = false;
// }else{
// element.show = true;
// }
element.show = !element.show;
} else {
element.show = false;
}
}
searchParam.enterpriseNumber = "";
searchParam.dateSearch = "";
},error =>{
})
}
</script>
<script>
export default {
data()
{
return {
columns: [
[{ text: '1', value: 1 }, { text: '2', value: 2}, { text: '3', value: 3}, { text: '4', value: 4},
{ text: '5', value: 5}, { text: '6', value: 6}, { text: '7', value: 7}, { text: '8', value: 8},
{ text: '9', value: 9}, { text: '10', value: 10}]]
}
},
}
</script>
<style lang="less" scoped>
.home {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: #ebf3fb;
.header_body {
height: 1.33rem;
}
.shop-center {
flex: 1;
overflow-y: scroll;
position: relative;
.goods_box {
display: flex;
background-color: #fff;
margin: 0.27rem;
border-radius: 0.27rem;
.swipe_cell {
width: 100%;
}
.card_box {
display: flex;
width: 100%;
padding: 0.27rem 0;
flex-direction: column;
.card_body {
background-color: #fff;
border-radius: 0.27rem;
flex: 1;
}
.card_box_span {
display: flex;
align-items: center;
margin: 2% 0;
padding: 0 3%;
color: #666;
font-size: 0.35rem;
line-height: 1.5;
p {
display: flex;
margin: 0;
}
}
.card_box_label {
color: #323233;
}
.card_box_action {
position: absolute;
right: 4%;
}
}
}
}
.shop_footer_body {
//height: 101px;
position: relative;
.footer-one-btn {
height: 1.33rem;
bottom: 1.34rem;
}
}
}
.search-button-list {
height: 0.7rem;
display: flex;
flex-direction: row;
padding-left: 0.27rem;
margin-top: 0.27rem;
align-items: end;
.search-button {
width: 15%;
height: 90%;
background: #ebebeb;
border-color: #ebebeb;
color: #999;
font-size: 0.3rem;
line-height: 1.5;
}
.search-button.active {
background-color: #d9e6fd;
border-color: #75a5fb;
color: #1367fe;
}
}
.search-button-date {
display: flex;
flex-direction: row;
align-items: end;
position: relative;
.date-select {
margin: 3% 0 0 4%;
color: #c1bfbf;
font-size: 0.52rem;
i {
transform: rotate(90deg);
font-size: 0.4rem;
}
}
.search-button {
position: absolute;
top: 1%;
right: 3%;
width: 15%;
height: 100%;
font-size: 0.3rem;
}
}
/deep/ .van-hairline--bottom {
margin: -1% 0 3% 0;
height: 0;
background-color: transparent;
border: 1px;
}
/deep/ .card_box_span:first-child p {
color: #c1bfbf !important;
}
.card-title i {
font-size: 0.5rem;
width: 0.65rem;
}
.card-title p {
display: block !important;
width: calc(100% - 1rem);
color: #000;
font-size: 0.40rem;
font-weight: bold;
/*white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;*/
}
/deep/ .van-search__content {
height: 0.9rem;
border: 1px solid #ececec;
border-radius: 0.15rem 0 0 0.15rem;
}
/deep/ .van-search__action {
margin: 0 3% 0 0;
width: 10%;
height: 0.9rem;
background: #1367fe;
border: 1px solid #1367fe;
border-radius: 0 0.15rem 0.15rem 0;
color: #fff;
text-align: center;
line-height: 0.9rem;
}
/deep/ .card_box_span p.warn-cont {
padding-left: 0.65rem;
color: #666;
font-size: 0.35rem;
}
.warning-rule {
display: flex;
margin: 2% 0.27rem 1%;
padding: 0.2rem;
border-radius: 0.27rem;
background-color: #fff4e8;
color: #fb710b;
font-size: 0.3rem;
line-height: 1.25;
}
.warning-rule i {
margin: 0 0.1rem;
color: #f50;
font-size: 0.35rem;
}
/***折叠**/
.look_all {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 0.75rem;
font-size: 0.3rem;
color: #666;
cursor: pointer;
user-select: none;
border-radius: 0.05rem;
}
.look_all i {
margin: 0 0.2rem;
padding: 0.1rem 0.3rem 0;
color: rgba(0, 0, 0, 0.35);
font-size: 0.4rem;
height: 0.5rem;
/*background: linear-gradient(to bottom, rgba(0, 0, 0, .1), transparent);*/
border-radius: 0.2rem 0.2rem 0 0;
}
.new_detail {
padding-top: 0.3rem;
height: 100%;
transition: height 2s linear;
}
.work_detail {
padding-top: 0.3rem;
height: 0.2rem;
overflow: hidden;
}
.new_up {
position: absolute;
bottom: 0.1rem;
}
/***/
.timbox {
margin: 3% 0 3% 8%;
padding-bottom: 1rem;
width: 90%;
height: 94%;
font-size: 0.3rem;
box-sizing: border-box;
}
.timtit {
position: relative;
top: -0.2rem;
left: 1.5%;
margin: 0.2rem 0 0;
font-size: 0.4rem;
color: #999;
}
.progress-box {
position: relative;
float: left;
clear: both;
margin: 0 2% 0 3%;
padding: 0.1rem 0.2rem 0.3rem;
width: 95%;
}
.prolist {
margin: 0 0 0 1.5%;
width: 100%;
color: #666;
line-height: 1.75;
}
.progress-box::before {
position: absolute;
z-index: 10;
left: 0;
top: 0.1rem;
content: '';
width: 0.01rem;
height: 100%;
background-color: rgb(195, 195, 195);
}
.progress-box:last-child::before {
height: 0;
}
.progress-box::after {
position: absolute;
z-index: 10;
left: -0.2rem;
top: 0.1rem;
content: '';
width: 0.25rem;
height: 0.25rem;
border: 0.1rem solid #fff;
border-radius: 0.5rem;
background-color: rgb(155 155 155);
}
.progress-box.level-0::after {
background-color: #1989fa;
}
.progress-box.level-1::after {
background-color: #ff0000;
}
.progress-box.level-2::after {
background-color: #f78b00;
}
.progress-box.level-3::after {
background-color: #f5cf08;
}
.prolist label {
display: inline-block;
margin-right: 0.1rem;
min-width: 1.2rem;
color: #323233;
}
.count-inspect {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 1% 5%;
width: 80%;
height: 3rem;
color: #666;
font-size: 0.35rem;
white-space: nowrap;
}
/deep/ .count-inspect .van-cell {
padding: 0;
}
/deep/ .count-inspect input.van-field__control {
padding: 0 0.2rem;
height: 0.8rem;
background: #fff;
border: 0.02667rem solid #ddd;
border-radius: 0.1rem;
}
/deep/ .count-inspect .van-cell:after {
border: 0;
}
.btn-bottom {
display: flex;
justify-content: center;
height: 2rem;
}
.btn-bottom .van-button {
margin: 2%;
width: 2rem;
height: 0.75rem;
border-radius: 0.5rem;
}
.btn-rt {
position: absolute;
top: 2%;
right: 3%;
}
/**/
</style>