107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
Vue
<template>
|
|
|
|
<DialogDragger title="预警详情" top="150px" v-model="props.show" @close="close">
|
|
|
|
<ul class="warningList" ref="gjyjList">
|
|
<li v-for="item in props.data" :key="item.id">
|
|
<YjItem :item="item" />
|
|
</li>
|
|
<MOSTY.Empty :show="props.data.length <= 0" :imgSize="150"></MOSTY.Empty>
|
|
</ul>
|
|
<!-- :style="{height: `calc(100vh - ${handleHs}px)`}" -->
|
|
|
|
<div style="position:relative;width: 100%;" :style="{ height: `calc(100vh - ${handleHs}px)` }">
|
|
<GdMap v-if="showMap"></GdMap>
|
|
</div>
|
|
</DialogDragger>
|
|
</template>
|
|
<script setup>
|
|
import * as MOSTY from "@/components/MyComponents/index";
|
|
import GdMap from "@/components/GdMap/index.vue";
|
|
|
|
import DialogDragger from "@/views/home/layout/dialogDragger.vue";
|
|
import YjItem from "@/views/home/components/yjItem.vue";
|
|
import { ref, defineProps, onMounted, watch } from "vue";
|
|
import emitter from "@/utils/eventBus.js";
|
|
const gjyjList = ref(null); //预警列表数据
|
|
//参数传递
|
|
const props = defineProps({
|
|
//某条预警详情
|
|
data: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
});
|
|
console.log(props.show);
|
|
|
|
//关闭
|
|
function close() {
|
|
emitter.emit('deletePointArea', 'home_yj_map');
|
|
emitter.emit("showHomeYJ", false);
|
|
}
|
|
const showMap = ref(false)
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
showMap.value = true
|
|
setTimeout(() => {
|
|
for (let i = 0; i < props.data.length; i++) {
|
|
const item = props.data[i];
|
|
console.log(item);
|
|
|
|
emitter.emit('showHomeYJ', [item]);
|
|
emitter.emit('deletePointArea', 'home_yj_map');
|
|
if (!item.jd || !item.jd) return proxy.$message({ type: "warning", message: "该预警没有坐标！" });
|
|
let icon = require('@/assets/point/yj.png');
|
|
if (item.yjjb == '20') icon = require('@/assets/point/yj1.png');
|
|
if (item.yjjb == '30') icon = require('@/assets/point/yj2.png');
|
|
if (item.yjjb == '40') icon = require('@/assets/point/yj3.png');
|
|
emitter.emit('addPointArea', { flag: 'home_yj_map', icon, coords: [item] });
|
|
emitter.emit('setMapCenter', { location: [item.jd, item.wd], zoomLevel: 10 });
|
|
}
|
|
}, 500);
|
|
|
|
|
|
}, 200);
|
|
})
|
|
const handleHs = ref(0)
|
|
watch(() => gjyjList.value, (val) => {
|
|
console.log(val.clientHeight);
|
|
handleHs.value = val.clientHeight + 198 + 150 + 20
|
|
}, { deep: true })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/css/homeScreen.scss";
|
|
|
|
.dialogBox {
|
|
z-index: 999;
|
|
|
|
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>
|