160 lines
4.0 KiB
Vue
160 lines
4.0 KiB
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>
|