初始提交
This commit is contained in:
365
src/pages/checkpointList/components/zlJczList.vue
Normal file
365
src/pages/checkpointList/components/zlJczList.vue
Normal file
@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<div style="padding-top: 13vw">
|
||||
<TopNav navTitle="指令列表" :showRight="false" :showLeft="true" />
|
||||
<div class="search">
|
||||
<div class="sort">
|
||||
<van-icon name="arrow-up" />
|
||||
<van-icon name="arrow-down" />
|
||||
时间排序
|
||||
</div>
|
||||
<span class="search-filter" @click="showRight = true">过滤筛选 <van-icon name="filter-o" /></span>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<ul class="listBox">
|
||||
<van-pull-refresh v-model="loadingPull" @refresh="onRefresh">
|
||||
<van-list v-model:loading="loading" :finished="finished" finished-text="" @load="onLoad" offset="1"
|
||||
:immediate-check="false">
|
||||
<li class="listBox-item" v-for="(item, index) in yjList" :key="index" @click="handelDetail(item)">
|
||||
<YjzlItem :data="item" />
|
||||
</li>
|
||||
<van-empty description="暂无信息" image="default" v-if="yjList.length <= 0 && !loading" />
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</ul>
|
||||
|
||||
<!-- 弹出层 -->
|
||||
<van-popup v-model:show="showRight" position="right" :style="{ width: '60%', height: '100%' }">
|
||||
<div class="popup-content">
|
||||
<div class="popup-title">过滤筛选</div>
|
||||
<ul class="popup-box">
|
||||
<li class="popup-item yjlx-info">
|
||||
<van-field v-model="form.warnType" label-width="60px" label="预警类型:" readonly placeholder="请选择预警类型"
|
||||
@click.stop="chooseYjlx()"></van-field>
|
||||
|
||||
<ul class="select-box" v-if="showLx">
|
||||
<span class="triangleup"></span>
|
||||
<li class="select-box-li" :class="isActive == 0 ? 'active' : ''" @click="cilickLx(0)">
|
||||
车辆
|
||||
</li>
|
||||
<li class="select-box-li" :class="isActive == 1 ? 'active' : ''" @click="cilickLx(1)">
|
||||
人员
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="popup-item">
|
||||
<van-field v-model="form.beginDate" label-width="60px" label="开始时间:" input-align="left"
|
||||
placeholder="请选择开始时间" readonly @click.stop="onClickTime('start')"></van-field>
|
||||
</li>
|
||||
<li class="popup-item">
|
||||
<van-field v-model="form.endDate" label-width="60px" input-align="left" label="结束时间:"
|
||||
@click.stop="onClickTime('end')" placeholder="请选择结束时间" readonly></van-field>
|
||||
</li>
|
||||
</ul>
|
||||
<div style="padding: 4vw 2vw">
|
||||
<van-button block plain @click="(form = {}), (form.beginDate = dateFormat())"
|
||||
style="margin-bottom: 2vw">重置</van-button>
|
||||
<van-button block type="primary" @click="onSubmit" loading-type="spinner"
|
||||
loading-text="登录中...">查询</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
<!-- 时间选择器 -->
|
||||
<SelectTime :timeType="timeType" v-if="timeShow" @update:time="onSelectTime"
|
||||
@update:cancelTime="timeShow = false" />
|
||||
|
||||
<!-- 时间提示框 -->
|
||||
<van-popup v-model:show="alertInfo" round :style="{ width: '80%' }">
|
||||
<div class="alertInfoBox">
|
||||
<div class="alert">结束时间必须大于开始时间</div>
|
||||
<div class="alertBtn" @click="alertInfo = false">确定</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import TopNav from "../../../components/topNav.vue";
|
||||
import YjzlItem from "../../../components//yjzlItem.vue";
|
||||
import SelectTime from "../../../components//SelectTime.vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { getyjzlList } from "../../../api/checkponit.js";
|
||||
import { dateFormat } from "../../../utils/tools.js";
|
||||
import { Loading } from "vant";
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const showRight = ref(false);
|
||||
const form = ref({ beginDate: dateFormat() });
|
||||
const isActive = ref(-1);
|
||||
const showLx = ref(false); //显示类型
|
||||
const timeType = ref("start");
|
||||
const timeShow = ref(false); //是否显示时间选择器
|
||||
const page = ref(1); //分页
|
||||
const pageSize = ref(10); //分页数
|
||||
const total = ref(0); //总数
|
||||
const yjList = ref([]);
|
||||
const loadingPull = ref(false); //下拉刷新
|
||||
const loading = ref(true); //数据加载中
|
||||
const finished = ref(false); //数据加载完成
|
||||
const alertInfo = ref(false) //消息提示
|
||||
onMounted(() => {
|
||||
getYjList();
|
||||
});
|
||||
|
||||
// 触底加载数据
|
||||
function onLoad() {
|
||||
if (yjList.value.length < total.value) {
|
||||
page.value++;
|
||||
getYjList();
|
||||
} else {
|
||||
loading.value = false;
|
||||
finished.value = true;
|
||||
}
|
||||
}
|
||||
//下拉刷新
|
||||
function onRefresh() {
|
||||
loading.value = false;
|
||||
loadingPull.value = false;
|
||||
finished.value = false;
|
||||
page.value = 1;
|
||||
getYjList();
|
||||
}
|
||||
|
||||
// 查询
|
||||
function onSubmit() {
|
||||
let date1 = new Date(form.value.beginDate); //开始
|
||||
let date2 = new Date(form.value.endDate); //结束
|
||||
if (date1 > date2) {
|
||||
alertInfo.value = true
|
||||
} else {
|
||||
yjList.value = [];
|
||||
showRight.value = false;
|
||||
page.value = 1;
|
||||
loading.value = true
|
||||
getYjList();
|
||||
}
|
||||
}
|
||||
|
||||
// 获取预警指令列表
|
||||
function getYjList() {
|
||||
let warnType =
|
||||
form.value.warnType == "车辆"
|
||||
? "1"
|
||||
: form.value.warnType == "人员"
|
||||
? "2"
|
||||
: "";
|
||||
let params = {
|
||||
currentPage: page.value,
|
||||
pageSize: pageSize.value,
|
||||
beginDate: '2022-01-01',
|
||||
// beginDate: form.value.beginDate,
|
||||
checkpointCode: route.query.kkid,
|
||||
warnType: warnType,
|
||||
endDate: form.value.endDate,
|
||||
};
|
||||
getyjzlList(params)
|
||||
.then((res) => {
|
||||
if (page.value == 1) {
|
||||
yjList.value = res.records;
|
||||
} else {
|
||||
yjList.value = yjList.value.concat(res.records);
|
||||
}
|
||||
page.value = res.current;
|
||||
pageSize.value = res.size;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
//查看详情
|
||||
function handelDetail(item) {
|
||||
let data = {
|
||||
time: item.warnningTime,
|
||||
label: item.label,
|
||||
plateNumber: item.plateNumber,
|
||||
checkName: item.checkName,
|
||||
activityAddress: item.activityAddress,
|
||||
id: item.id,
|
||||
carImg: item.carImg,
|
||||
userName: item.userName,
|
||||
photo: item.idcardPhoto,
|
||||
jd: item.jd,
|
||||
wd: item.wd,
|
||||
sfzh: item.idcard
|
||||
}
|
||||
router.push({ path: '/lmjHome/zlJczDetail', query: data })
|
||||
}
|
||||
|
||||
// 时间点击
|
||||
function onClickTime(val) {
|
||||
timeType.value = val;
|
||||
timeShow.value = true;
|
||||
}
|
||||
|
||||
// 时间选中
|
||||
function onSelectTime(val) {
|
||||
if (timeType.value == "start") {
|
||||
form.value.beginDate = val;
|
||||
} else {
|
||||
form.value.endDate = val;
|
||||
}
|
||||
timeShow.value = false;
|
||||
}
|
||||
|
||||
// 选则类型
|
||||
function chooseYjlx() {
|
||||
showLx.value = !showLx.value;
|
||||
}
|
||||
// 选中类型
|
||||
function cilickLx(val) {
|
||||
isActive.value = val;
|
||||
switch (val) {
|
||||
case 0:
|
||||
form.value.warnType = "车辆";
|
||||
break;
|
||||
case 1:
|
||||
form.value.warnType = "人员";
|
||||
break;
|
||||
}
|
||||
showLx.value = !showLx.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search {
|
||||
padding: 2vw 2vw 0;
|
||||
box-sizing: border-box;
|
||||
height: 11vw;
|
||||
line-height: 5vw;
|
||||
font-size: 12px;
|
||||
background: #f1f1f1;
|
||||
|
||||
.sort {
|
||||
float: left;
|
||||
padding: 1vw 3vw 1vw 6vw;
|
||||
border: 1px solid #e9e9e9;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
|
||||
.van-icon-arrow-up {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.van-icon-arrow-down {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-filter {
|
||||
float: right;
|
||||
color: #3373fa;
|
||||
line-height: 8vw;
|
||||
|
||||
.van-icon {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listBox {
|
||||
height: calc(100vh - 24vw);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
// .van-pull-refresh{
|
||||
// height: 100%;
|
||||
// overflow-y: auto;
|
||||
|
||||
// }
|
||||
.listBox-item {}
|
||||
}
|
||||
|
||||
// 弹窗
|
||||
.popup-content {
|
||||
.popup-title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.popup-box {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
font-size: 12px;
|
||||
line-height: 11vw;
|
||||
color: #000;
|
||||
|
||||
.popup-item {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
.popup-name {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
text-align-last: justify;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.yjlx-info {
|
||||
position: relative;
|
||||
|
||||
.select-box {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
width: 50%;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
top: 50px;
|
||||
right: 20px;
|
||||
|
||||
.select-box-li {
|
||||
padding-left: 2vw;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: rgb(22, 220, 255);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.select-box-li:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.triangleup {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: -13px;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 6px solid transparent;
|
||||
border-bottom-color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alertInfoBox {
|
||||
padding: 2vw;
|
||||
|
||||
.alert {
|
||||
line-height: 10vw;
|
||||
text-align: center;
|
||||
color: #8f8f94;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.alertBtn {
|
||||
text-align: center;
|
||||
height: 12vw;
|
||||
line-height: 12vw;
|
||||
margin: 4vw 0;
|
||||
background: #eee;
|
||||
color: #8f8f94
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user