262 lines
7.9 KiB
Vue
262 lines
7.9 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">
|
||
<deployControlItem :item="item" :buttonBox="true" @plotThetrajectory="plotThetrajectory"
|
||
@showFeedback="showFeedback" @showDetail="showDetail"/>
|
||
</li>
|
||
<MOSTY.Empty :show="props.data.length <= 0" :imgSize="150"></MOSTY.Empty>
|
||
</ul>
|
||
<div style="position:relative;width: 100%;" :style="{ height: `calc(100vh - ${handleHs}px)` }">
|
||
<GdMap v-if="showMap" :mapKey="'home_yj_map'" :mapid="'homeYjMap'" />
|
||
</div>
|
||
</DialogDragger>
|
||
<FkDialog @change="close"/>
|
||
<Information v-model="showDialog" title="发送指令" @submit='submit' @close='closeFszl'>
|
||
<SemdFqzl ref="semdFqzlRef" :itemData="itemData" @handleClose="handleClose" identification="yj"
|
||
:tacitly="tacitly" />
|
||
</Information>
|
||
|
||
</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 deployControlItem from "@/views/home/components/deployControlItem.vue";
|
||
import Information from "@/views/home/model/information.vue";
|
||
import SemdFqzl from '@/components/instructionHasBeen/sendFqzl.vue'
|
||
import FkDialog from "@/views/backOfficeSystem/fourColorManage/warningControl/centerHome/components/fkDialog.vue";
|
||
import { tbYjxxGsgj } from '@/api/yj'
|
||
import { ref, defineProps, onMounted, watch, getCurrentInstance } from "vue";
|
||
import emitter from "@/utils/eventBus.js";
|
||
const gjyjList = ref(null); //预警列表数据
|
||
const { proxy } = getCurrentInstance();
|
||
//参数传递
|
||
const props = defineProps({
|
||
//某条预警详情
|
||
data: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
});
|
||
|
||
//关闭
|
||
function close() {
|
||
emitter.emit('deletePointArea', 'home_yj_map');
|
||
emitter.emit("showHomeYJ", false);
|
||
emitter.emit("closeYp")
|
||
}
|
||
const showMap = ref(false)
|
||
onMounted(() => {
|
||
setTimeout(() => {
|
||
showMap.value = true
|
||
setTimeout(() => {
|
||
// 只删除一次home_yj_map区域的点，避免影响其他地图
|
||
emitter.emit('deletePointArea', 'home_yj_map');
|
||
|
||
// 收集所有有效坐标的数据点
|
||
const validPoints = [];
|
||
for (let i = 0; i < props.data.length; i++) {
|
||
const item = props.data[i];
|
||
// 修复重复的坐标判断条件
|
||
if (!item.jd || !item.wd) {
|
||
// 使用警告而不是return，避免中断循环
|
||
console.warn("该预警没有坐标：", item);
|
||
continue;
|
||
}
|
||
validPoints.push(item);
|
||
}
|
||
|
||
// 如果有有效点，显示第一条并添加所有点
|
||
if (validPoints.length > 0) {
|
||
// 只显示第一条数据的详情
|
||
emitter.emit('showHomeYJ', [validPoints[0]]);
|
||
|
||
// 为每个有效点添加标记
|
||
validPoints.forEach((item, index) => {
|
||
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_${index}`,
|
||
baseFlag: 'home_yj_map',
|
||
icon,
|
||
coords: [item]
|
||
});
|
||
});
|
||
|
||
// 只设置一次地图中心（使用第一个有效点）
|
||
emitter.emit('setMapCenter', {
|
||
location: [validPoints[0].jd, validPoints[0].wd],
|
||
zoomLevel: 10,
|
||
flag: 'home_yj_map' // 添加标识，确保只影响当前地图
|
||
});
|
||
}
|
||
}, 500);
|
||
}, 200);
|
||
})
|
||
const handleHs = ref(0)
|
||
watch(() => gjyjList.value, (val) => {
|
||
handleHs.value = val.clientHeight + 198 + 150 + 20
|
||
}, { deep: true })
|
||
|
||
// 轨迹上图
|
||
const plotThetrajectory = (val) => {
|
||
tbYjxxGsgj({
|
||
startTime: null,
|
||
endTime: null,
|
||
yjRysfzh: val
|
||
}).then(res => {
|
||
console.log(res);
|
||
if (res && res[0].list.length > 0) {
|
||
let coords = res[0].list.map(item => {
|
||
return [item.jd, item.wd]
|
||
})
|
||
// const coords = [
|
||
// [
|
||
// 94.3695802486277983689433312974870204925537109375,
|
||
// 29.659805088901098457654370577074587345123291015625
|
||
// ],
|
||
// [
|
||
// 94.369054723455093380835023708641529083251953125,
|
||
// 29.66032233866609857386720250360667705535888671875
|
||
// ],
|
||
// [
|
||
// 94.3684916577901020673380116932094097137451171875,
|
||
// 29.660979382630298317735650925897061824798583984375
|
||
// ],
|
||
// [
|
||
// 94.3683415069466065006054122932255268096923828125,
|
||
// 29.660755708570601285600787377916276454925537109375
|
||
// ],
|
||
// [
|
||
// 94.3675662718153063224235665984451770782470703125,
|
||
// 29.659987675165101705943015986122190952301025390625
|
||
// ],
|
||
// [
|
||
// 94.366890606904092919648974202573299407958984375,
|
||
// 29.659353928438999759009675472043454647064208984375
|
||
// ],
|
||
// [
|
||
// 94.3656729217579055557507672347128391265869140625,
|
||
// 29.6582345740253998656044132076203823089599609375
|
||
// ],
|
||
// [
|
||
// 94.3646650204280064144768402911722660064697265625,
|
||
// 29.657336173164399184543071896769106388092041015625
|
||
// ],
|
||
// [
|
||
// 94.364147680070203705327003262937068939208984375,
|
||
// 29.6567231392728984928908175788819789886474609375
|
||
// ],
|
||
// [
|
||
// 94.3636436022359958997185458429157733917236328125,
|
||
// 29.65662527779360146951148635707795619964599609375
|
||
// ],
|
||
// [
|
||
// 94.362367320062702447103220038115978240966796875,
|
||
// 29.6567138191363000032652053050696849822998046875
|
||
// ],
|
||
// [
|
||
// 94.3614396063849056872641085647046566009521484375,
|
||
// 29.656713819753800720491199172101914882659912109375
|
||
// ],
|
||
// [
|
||
// 94.3603242001151016893345513381063938140869140625,
|
||
// 29.65673712009380125209645484574139118194580078125
|
||
// ],
|
||
// [
|
||
// 94.358962121621999585840967483818531036376953125,
|
||
// 29.65674177535930056137658539228141307830810546875
|
||
// ],
|
||
// [
|
||
// 94.3576684689077040957272402010858058929443359375,
|
||
// 29.65681167375640114869383978657424449920654296875
|
||
// ],
|
||
// [
|
||
// 94.3564404495050013110812869854271411895751953125,
|
||
// 29.65685827438640131958891288377344608306884765625
|
||
// ],
|
||
// [
|
||
// 94.3547512464013067301493720151484012603759765625,
|
||
// 29.656946809372101370172458700835704803466796875
|
||
// ]
|
||
// ]
|
||
emitter.emit('drawLineAnimation', {
|
||
type: "solid",
|
||
coords: coords,
|
||
isclear: true,
|
||
flag: "yjLine"
|
||
})
|
||
} else {
|
||
ElMessage({ message: '暂无轨迹数据', type: 'warning' });
|
||
}
|
||
})
|
||
}
|
||
// 查看反馈
|
||
const showFeedback = (val) => {
|
||
emitter.emit("openFkDialog",val )
|
||
}
|
||
// 发送指令
|
||
const showDialog = ref(false)
|
||
const itemData = ref()
|
||
const showDetail = (item) => {
|
||
showDialog.value = true;
|
||
itemData.value = item
|
||
}
|
||
const handleClose = () => {
|
||
showDialog.value = false;
|
||
}
|
||
const semdFqzlRef = ref()
|
||
const tacitly = {
|
||
title: 'yjbt',
|
||
instructionContent: 'yjnr'
|
||
}
|
||
const submit = () => {
|
||
semdFqzlRef.value.getsendFqzl()
|
||
}
|
||
const closeFszl = () => {
|
||
semdFqzlRef.value.close()
|
||
}
|
||
|
||
|
||
</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>
|