ba_web/src/views/homeMy/components/dialog/warningList.vue

<template>
  <div class="dialogBox" v-loading="loading">
    <div class="title">
      <span class="mc">{{ title }}</span>
      <span class="close" @click="close">×</span>
    </div>
    <ul class="warningList" ref="gjyjList">
      <li v-for="item in warningList" :key="item.id">
        <YjItem :data="item"/>
      </li>
      <el-empty
        description="没有数据"
        :image-size="0.1"
        v-if="!loading && warningList.length <= 0"
      />
    </ul>
  </div>
</template>
<script setup>
import YjItem from "@/views/homeMy/components/yjItem.vue";
import { getSelectTrack } from "@/api/dpApi/zzzh.js";
import { getSelectVigilantList } from "@/api/dpApi/home.js";
import { ElMessage } from "element-plus";
import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance,
  onUnmounted,
  defineEmits,
  defineProps,
  watch
} from "vue";
import people from "@/assets/images/peo.png";
import car from "@/assets/images/car.png";
import emitter from "@/utils/eventBus.js";
const { proxy } = getCurrentInstance();
const { D_BZ_YJLX } = proxy.$dict("D_BZ_YJLX");
const warningList = ref([]); //预警列表数据
const pageSize = ref(4);
const pageCurrent = ref(1);
const pageTotal = ref(0);
const yjInfo = ref(null); //预警信息
const gjyjList = ref(null); //预警列表数据
const loading = ref(false);
//参数传递
const props = defineProps({
  //某条预警详情
  info: {
    type:Object,
    default:{}
  },
  //标题数据
  title: String
});
const emit = defineEmits(["close"]);
onMounted(() => {
  yjInfo.value = props.info;
  _getSelectTrack(props.info);
  scroll();
});
// 监听视频地址变化
watch(
  () => props.info,
  (val) => {
    pageCurrent.value = 1;
    yjInfo.value = val;
    _getSelectTrack(val);
  },
  { immediate: true, deep: true }
);
//关闭
function close() {
  emit("close", false);
}

//获取轨迹预警列表
function _getSelectTrack(yjInfo) {
  loading.value = true;
  let data = {
    pageSize: pageSize.value,
    pageCurrent: pageCurrent.value,
    yjRyxm: yjInfo.yjRyxm ? yjInfo.yjRyxm : "",
    yjRysfzh: yjInfo.yjRysfzh ? yjInfo.yjRysfzh : "",
    yjHplx: yjInfo.yjHplx ? yjInfo.yjHplx : "",
    yjClcph: yjInfo.yjClcph ? yjInfo.yjClcph : ""
  };
  if (props.title == "轨迹预警") {
    getSelectTrack(data).then((res) => {
      loading.value = false;
      if (pageCurrent.value == 1) {
        warningList.value = res.records ? res.records : [];
      } else {
        let arr = res.records ? res.records : [];
        warningList.value = warningList.value.concat(arr);
      }
      pageTotal.value = res.total;
    });
  } else {
    //周边预警
    data.radius = 300;
    data.jd = props.info.jd;
    data.wd = props.info.wd;
    data.pageNum = pageCurrent.value;
    getSelectVigilantList(data).then((res) => {
      loading.value = false;
      if (pageCurrent.value == 1) {
        warningList.value = res.records ? res.records : [];
      } else {
        let arr = res.records ? res.records : [];
        warningList.value = warningList.value.concat(arr);
      }
      pageTotal.value = res.total;
    });
  }
}
//触底加载
function scroll() {
  let scrollTargetBox = gjyjList.value;
  scrollTargetBox.onscroll = (e) => {
    var scrollHeight = scrollTargetBox.scrollHeight; //251
    var scrollTop = scrollTargetBox.scrollTop; //0-18
    var clientHeight = scrollTargetBox.clientHeight; //233
    if (scrollHeight - clientHeight == scrollTop) {
      //滚动条滚到最底部
      if (warningList.value.length < pageTotal.value) {
        pageCurrent.value++;
        _getSelectTrack(yjInfo.value);
      }
    }
  };
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.dialogBox {
  ul.warningList{
    height: calc(100vh - 198px);
    overflow: hidden;
    overflow-y: auto;
    padding: 7px 10px;
    box-sizing: border-box;
    .photo {
      width: 60px;
      height: 80px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
//加载时 取消背景
::v-deep .el-loading-mask {
  background-color: transparent !important;
}

</style>