'保安项目提交'

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

@@ -0,0 +1,159 @@
+<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>