dy_app/src/pages/checkpointList/components/zlJczList.vue

<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>