1082 lines
29 KiB
Vue
1082 lines
29 KiB
Vue
<template>
|
||
<div class="card__content-box">
|
||
<!-- 滚动表格区域 -->
|
||
<div class="table">
|
||
<!-- 表头容器 - 固定显示 -->
|
||
<div class="table__header-container">
|
||
<div class="table__item table__header">
|
||
<div>序号</div>
|
||
<div>预警名称</div>
|
||
<div>预警点位</div>
|
||
<div>预警摄像</div>
|
||
<div>发布时间</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 内容滚动区域 -->
|
||
<div class="table__body-container">
|
||
<div class="scroll" v-if="tableData.length > 0">
|
||
<vue3-seamless-scroll :step="0.5" :hover="true" :list="tableData">
|
||
<div
|
||
class="table__item"
|
||
v-for="(item, index) in tableData"
|
||
:key="index"
|
||
@click="handleRowClick(item)"
|
||
>
|
||
<div class="scroll_table item_num">{{ index + 1 }}</div>
|
||
|
||
<!-- 1. 预警名称添加Tooltip -->
|
||
<el-tooltip
|
||
effect="dark"
|
||
placement="top"
|
||
:content="item.warningSigns"
|
||
teleported
|
||
popper-class="table-tooltip"
|
||
>
|
||
<div class="scroll_table item_courtName tooltip">
|
||
{{ item.warningSigns }}
|
||
</div>
|
||
</el-tooltip>
|
||
|
||
<!-- 2. 预警点位添加Tooltip -->
|
||
<el-tooltip
|
||
effect="dark"
|
||
placement="top"
|
||
:content="item.pointName"
|
||
teleported
|
||
popper-class="table-tooltip"
|
||
>
|
||
<div class="scroll_table item_punisherName tooltip">
|
||
{{ item.pointName }}
|
||
</div>
|
||
</el-tooltip>
|
||
|
||
<!-- 3. 预警摄像添加Tooltip -->
|
||
<el-tooltip
|
||
effect="dark"
|
||
placement="top"
|
||
:content="item.cameraName"
|
||
teleported
|
||
popper-class="table-tooltip"
|
||
>
|
||
<div class="scroll_table item_punisherName tooltip">
|
||
{{ item.cameraName }}
|
||
</div>
|
||
</el-tooltip>
|
||
|
||
<!-- 4. 发布时间添加Tooltip -->
|
||
<el-tooltip
|
||
effect="dark"
|
||
placement="top"
|
||
:content="item.releaseTime"
|
||
teleported
|
||
popper-class="table-tooltip"
|
||
>
|
||
<div class="scroll_table item_courtName tooltip">
|
||
{{ item.releaseTime }}
|
||
</div>
|
||
</el-tooltip>
|
||
</div>
|
||
</vue3-seamless-scroll>
|
||
</div>
|
||
|
||
<div v-else class="nocontent">
|
||
<el-empty :image-size="100" description="暂无数据" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 处置状态弹窗 -->
|
||
<LargeScreenModal
|
||
v-model:open="chargeOpen"
|
||
:title="modalTitle"
|
||
>
|
||
<div class="tableWrap largeScreen">
|
||
<el-descriptions
|
||
class="largeScreen__descriptions"
|
||
:column="2"
|
||
size="large"
|
||
border
|
||
>
|
||
<template v-for="item in formColumns">
|
||
<el-descriptions-item :label="item.label">{{
|
||
formInfo[item.key] || "-"
|
||
}}</el-descriptions-item>
|
||
</template>
|
||
</el-descriptions>
|
||
</div>
|
||
|
||
<div class="custom-timeline">
|
||
<div
|
||
v-for="(item, index) in timelineData"
|
||
:key="index"
|
||
class="timeline-item"
|
||
>
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">处理时间: {{ item.createTime }}</div>
|
||
<div class="timeline-desc">
|
||
<p>状态:{{ getStatusLabel(item.disposalStatus) }}</p>
|
||
<p>措施:{{ item.disposalMeasures || "-" }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</LargeScreenModal>
|
||
|
||
<!-- 预警详情与热力图弹窗 -->
|
||
<LargeScreenModal
|
||
v-model:open="warningModalOpen"
|
||
title="预警详情与热力图"
|
||
:width="styleUtil.px2vw(1200)"
|
||
:height="styleUtil.px2vh(800)"
|
||
@close="handleClose"
|
||
>
|
||
<div class="titles">{{ titlesTitle }}</div>
|
||
<!-- 详情区域 -->
|
||
<div class="detail-section">
|
||
<el-descriptions
|
||
class="largeScreen__descriptions"
|
||
:column="2"
|
||
size="large"
|
||
border
|
||
>
|
||
<template #extra>
|
||
</template>
|
||
<template v-for="item in warningFormColumns">
|
||
<!-- <el-descriptions-item v-if="item.label == '监控/外呼'" :label="item.label"> -->
|
||
<el-descriptions-item v-if="item.label == '监控'" :label="item.label">
|
||
<el-button type="primary" size="default" @click="lookJK">
|
||
查看监控
|
||
</el-button>
|
||
<!-- <el-button type="primary" size="default" @click="CALL">
|
||
外呼
|
||
</el-button> -->
|
||
</el-descriptions-item>
|
||
<el-descriptions-item v-else :label="item.label">{{
|
||
warningDetail[item.key] || "-"
|
||
}}</el-descriptions-item>
|
||
</template>
|
||
</el-descriptions>
|
||
</div>
|
||
|
||
<!-- 地图区域 -->
|
||
<div class="map-section">
|
||
<div id="warningMap" ref="mapContainer"></div>
|
||
|
||
<!-- 加载状态 -->
|
||
<div v-if="isLoading" class="map-loading">
|
||
<el-icon class="is-loading"><Loading /></el-icon>加载中...
|
||
</div>
|
||
|
||
<!-- 热力图图例 -->
|
||
<div class="map-legend" v-if="showLegend && showHeatmap">
|
||
<h4>客流热力等级</h4>
|
||
<div class="legend-gradient"></div>
|
||
<div class="legend-labels">
|
||
<span>低</span><span>中</span><span>高</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</LargeScreenModal>
|
||
|
||
<!-- 视频弹窗 -->
|
||
<LargeScreenModal
|
||
v-model:open="chargeOpenJK"
|
||
title="监控视频"
|
||
:width="styleUtil.px2vw(1200)"
|
||
:height="styleUtil.px2vh(800)"
|
||
@close="handleVideoClose"
|
||
>
|
||
<div class="tableWrap largeScreen">
|
||
<VideoMonitor
|
||
:video-url="currentVideoUrl"
|
||
width="100%"
|
||
height="100%"
|
||
style="margin-left: 40px"
|
||
/>
|
||
</div>
|
||
</LargeScreenModal>
|
||
<!-- 外呼的弹窗 -->
|
||
<LargeScreenModal
|
||
v-model:open="callDialog"
|
||
title="外呼"
|
||
:width="styleUtil.px2vw(400)"
|
||
:height="styleUtil.px2vh(500)"
|
||
@close="handleVideoClose2"
|
||
>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<div class="callDemo">
|
||
<Call ref="CallRef" :listRows="callForm" width="100%" height="400px" />
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</LargeScreenModal>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive,
|
||
onMounted,
|
||
getCurrentInstance,
|
||
nextTick,
|
||
watch,
|
||
} from "vue";
|
||
import {
|
||
getPoints,
|
||
} from "@/api/points";
|
||
import Call from "@/components/call.vue";
|
||
|
||
import styleUtil from "@/utils/styleUtils";
|
||
import LargeScreenModal from "../largeScreenModal.vue";
|
||
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||
import L from "leaflet";
|
||
import "leaflet/dist/leaflet.css";
|
||
import "leaflet.heat/dist/leaflet-heat.js"; // 与主地图一致的热力图库
|
||
import { ElIcon, ElEmpty, ElMessage, ElSlider } from "element-plus";
|
||
import { Loading } from "@element-plus/icons-vue";
|
||
import _ from "lodash";
|
||
import VideoMonitor from "../../../../components/VideoMonitor.vue";
|
||
import moment from "moment";
|
||
|
||
// 接口导入 - 与主地图使用相同的接口
|
||
import {
|
||
getchuzhiList,
|
||
getchuzhiListDetail,
|
||
getchuzhiListLiucheng,
|
||
getYJRLi,
|
||
getYJRLiDetalis,
|
||
getYJRLiJK,
|
||
} from "@/api/map.js";
|
||
|
||
// 图标 - 与主地图一致
|
||
import warningIcon from "@/assets/images/yujing2.png";
|
||
|
||
// 常量定义 - 与主地图完全一致
|
||
const CHINA_BOUNDS = {
|
||
minLat: 18.1,
|
||
maxLat: 53.5,
|
||
minLng: 73.6,
|
||
maxLng: 135.1,
|
||
};
|
||
const DEFAULT_COORDS = [34.22, 108.96]; // 西安
|
||
const DEFAULT_ZOOM = 11;
|
||
const PARAM_ZOOM = 16;
|
||
|
||
const { proxy } = getCurrentInstance();
|
||
const emit = defineEmits(["update-map-params"]);
|
||
const { disposal_status } = proxy.useDict("disposal_status");
|
||
|
||
// 表格数据
|
||
const tableData = ref([]);
|
||
|
||
// 处置弹窗相关
|
||
const chargeOpen = ref(false);
|
||
const modalTitle = ref("处置状态查看");
|
||
const formInfo = ref({});
|
||
const timelineData = ref([]);
|
||
const formColumns = ref([
|
||
{ label: "预警唯一标识符", key: "warningSigns" },
|
||
{ label: "发布单位名称", key: "unitName" },
|
||
{ label: "发布单位编码", key: "unitCode" },
|
||
{ label: "发布时间", key: "releaseTime" },
|
||
{ label: "经度", key: "lng" },
|
||
{ label: "纬度", key: "lat" },
|
||
{ label: "可能波及范围", key: "scopeImpact" },
|
||
{ label: "异常数据值", key: "abnormalData" },
|
||
{ label: "预计持续时间", key: "expectedDuration" },
|
||
//{ label: "监控/外呼", key: "expectedDuration" },
|
||
{ label: "监控", key: "expectedDuration" },
|
||
]);
|
||
|
||
// 预警详情弹窗相关
|
||
const warningModalOpen = ref(false);
|
||
const warningDetail = ref({});
|
||
const currentRow = ref(null);
|
||
const isLoading = ref(false);
|
||
const showLegend = ref(false);
|
||
const showNoData = ref(false);
|
||
const showHeatmap = ref(true);
|
||
const showMarker = ref(true);
|
||
|
||
// 热力图参数 - 与主地图完全一致
|
||
const heatRadius = ref(50); // 热力图半径
|
||
const heatBlur = ref(30); // 热力图模糊度
|
||
const heatMaxZoom = ref(10); // 最大缩放级别
|
||
const heatMaxOpacity = ref(0.8); // 最大透明度
|
||
|
||
// 地图相关 - 与主地图保持一致的图层结构
|
||
const mapContainer = ref(null);
|
||
const mapInstance = ref(null);
|
||
const markerObj = ref(null);
|
||
const heatmapLayer = ref(null); // 热力图专用图层
|
||
const markersLayer = ref(null); // 标记专用图层
|
||
let currentHeatmapLayer = null; // 当前热力图层实例
|
||
const filePathS = ref("");
|
||
const chargeOpenJK = ref(false);
|
||
const currentVideoUrl = ref("");
|
||
// 预警详情表格配置
|
||
const warningFormColumns = ref([
|
||
{ label: "预警名称", key: "warningSigns" },
|
||
{ label: "预警点位", key: "pointName" },
|
||
{ label: "预警摄像", key: "cameraName" },
|
||
{ label: "发布时间", key: "releaseTime" },
|
||
{ label: "经度", key: "lng" },
|
||
{ label: "纬度", key: "lat" },
|
||
{ label: "可能波及范围", key: "scopeImpact" },
|
||
{ label: "异常数据值", key: "abnormalData" },
|
||
{ label: "预计持续时间", key: "expectedDuration" },
|
||
// { label: "监控/外呼", key: "expectedDuration" }
|
||
{ label: "监控", key: "expectedDuration" }
|
||
]);
|
||
const titlesTitle = ref('')
|
||
const currentWarningId = ref('')
|
||
// 行点击事件 - 与主地图逻辑一致
|
||
const handleRowClick = async (row) => {
|
||
console.log(row);
|
||
currentWarningId.value = row.unitCode;
|
||
filePathS.value = row.filePath;
|
||
currentRow.value = row;
|
||
isLoading.value = true;
|
||
warningModalOpen.value = true;
|
||
showNoData.value = false;
|
||
showHeatmap.value = true;
|
||
showMarker.value = true;
|
||
|
||
try {
|
||
// 解析经纬度
|
||
const lat = Number(row.lat);
|
||
const lng = Number(row.lng);
|
||
const hasValidCoord = !isNaN(lat) && !isNaN(lng) && isInChina(lat, lng);
|
||
|
||
if (hasValidCoord) {
|
||
emit("update-map-params", {
|
||
latitude: lat.toFixed(6),
|
||
longitude: lng.toFixed(6),
|
||
monitoringTypeName: "warning",
|
||
});
|
||
} else {
|
||
ElMessage.warning("经纬度无效，使用默认位置");
|
||
}
|
||
|
||
await nextTick();
|
||
let startTime = moment(row.releaseTime).format("YYYY-MM-DD");
|
||
|
||
// 并行加载数据 - 与主地图使用相同的接口
|
||
const [detailRes, heatRes] = await Promise.all([
|
||
getYJRLiDetalis(row.id).catch((err) => ({ code: 500, data: null })),
|
||
getYJRLi({
|
||
srcIndex: row.filePath || row.id,
|
||
startTime: startTime ? `${startTime} 00:00:00` : "",
|
||
endTime: row.releaseTime ? `${row.releaseTime}` : "",
|
||
}).catch((err) => ({ code: 500, data: null })),
|
||
]);
|
||
console.log(heatRes, "热力");
|
||
|
||
// 处理详情数据
|
||
warningDetail.value = detailRes.code === 200 ? detailRes.data || {} : {};
|
||
console.log(warningDetail.value,'warningDetailwarningDetail');
|
||
const index = warningDetail.value.warningSigns.indexOf('秒');
|
||
titlesTitle.value = index !== -1 ? warningDetail.value.warningSigns.slice(index + 1) : '';
|
||
// 初始化地图（与主地图配置一致）
|
||
await initMap(row);
|
||
|
||
// 处理热力图数据 - 与主地图逻辑一致
|
||
if (heatRes.code === 200 && heatRes.data && heatRes.data.length) {
|
||
renderHeatmap(heatRes.data); // 使用与主地图相同的热力图渲染
|
||
showLegend.value = true;
|
||
showNoData.value = false;
|
||
|
||
// 调整地图视图到数据区域 - 与主地图逻辑一致
|
||
const bounds = L.latLngBounds(
|
||
heatRes.data.map((item) => [
|
||
Number(item.latitude || item.lat),
|
||
Number(item.longitude || item.lng),
|
||
])
|
||
);
|
||
|
||
if (bounds.isValid()) {
|
||
mapInstance.value.fitBounds(bounds, {
|
||
padding: [80, 80], // 可选：增加边距，让视图更宽松
|
||
maxZoom: 14, // 核心属性：限制最大缩放级别
|
||
});
|
||
}
|
||
} else {
|
||
showNoData.value = true;
|
||
showLegend.value = false;
|
||
ElMessage.info("未获取到热力图数据");
|
||
}
|
||
} catch (error) {
|
||
console.error("加载失败:", error);
|
||
ElMessage.error("加载数据失败，请重试");
|
||
await initMap(currentRow.value);
|
||
} finally {
|
||
isLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// 初始化地图 - 与主地图配置完全一致
|
||
const initMap = async (row) => {
|
||
const lat = Number(row.lat) || DEFAULT_COORDS[0];
|
||
const lng = Number(row.lng) || DEFAULT_COORDS[1];
|
||
|
||
await nextTick();
|
||
|
||
if (!mapContainer.value) {
|
||
console.error("地图容器不存在");
|
||
return;
|
||
}
|
||
|
||
// 设置容器尺寸
|
||
mapContainer.value.style.width = "100%";
|
||
mapContainer.value.style.height = "100%";
|
||
|
||
// 创建瓦片地图
|
||
L.CRS.EPSG4490 = L.extend({},
|
||
L.CRS.EPSG4326,
|
||
{
|
||
code: 'EPSG:4490',
|
||
scale: function (zoom) { return 256 * Math.pow(2, zoom - 1); }
|
||
}
|
||
);
|
||
|
||
// 创建地图实例（与主地图参数一致）
|
||
if (!mapInstance.value) {
|
||
mapInstance.value = L.map(mapContainer.value, {
|
||
center: [lat, lng],
|
||
zoom: 12,
|
||
maxZoom: 16, // 可选：限制手动缩放的最大级别
|
||
minZoom: 8,
|
||
zoomControl: false,
|
||
attributionControl: false,
|
||
dragging: true,
|
||
touchZoom: true,
|
||
scrollWheelZoom: true,
|
||
doubleClickZoom: true,
|
||
// 配置瓦片地图
|
||
crs: L.CRS.EPSG4490,
|
||
});
|
||
|
||
// 添加与主地图相同的底图
|
||
L.tileLayer(
|
||
// "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
|
||
"https://10.22.245.209:18888/kgis/rest/services/GETileWGS20240425/MapServer/tile/{z}/{y}/{x}",
|
||
{ subdomains: ["1", "2", "3", "4"], maxZoom: 20 }
|
||
).addTo(mapInstance.value);
|
||
|
||
// // 添加与主地图相同的底图
|
||
// const tileLayer1 = L.tileLayer(
|
||
// "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
|
||
// { subdomains: ["1", "2", "3", "4"] }
|
||
// ).addTo(mapInstance.value);
|
||
|
||
// const tileLayer2 = L.tileLayer(
|
||
// "https://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1",
|
||
// { subdomains: ["1", "2", "3", "4"], pane: "markerPane" }
|
||
// ).addTo(mapInstance.value);
|
||
|
||
// 添加相同的缩放控件
|
||
L.control.zoom({ position: "topright" }).addTo(mapInstance.value);
|
||
|
||
// 创建图层（与主地图图层结构一致）
|
||
heatmapLayer.value = L.layerGroup().addTo(mapInstance.value);
|
||
markersLayer.value = L.layerGroup().addTo(mapInstance.value);
|
||
|
||
// 保持与主地图相同的图层顺序
|
||
heatmapLayer.value.setZIndex(300);
|
||
markersLayer.value.setZIndex(400);
|
||
|
||
// 监听地图事件 - 与主地图一致
|
||
mapInstance.value.on(
|
||
"zoomend moveend",
|
||
_.debounce(() => {
|
||
if (mapInstance.value) {
|
||
mapInstance.value.invalidateSize();
|
||
}
|
||
}, 100)
|
||
);
|
||
} else {
|
||
mapInstance.value.setView([lat, lng], PARAM_ZOOM);
|
||
clearHeatmap();
|
||
}
|
||
|
||
// 添加预警标记 - 与主地图标记样式一致
|
||
if (row) {
|
||
addWarningMarker(lat, lng, row);
|
||
}
|
||
};
|
||
|
||
// 添加预警标记 - 与主地图标记逻辑一致
|
||
const addWarningMarker = (lat, lng, row) => {
|
||
if (markerObj.value) {
|
||
markersLayer.value.removeLayer(markerObj.value);
|
||
}
|
||
|
||
// 创建与主地图一致的图标
|
||
const icon = L.icon({
|
||
iconUrl: warningIcon,
|
||
iconSize: [32, 32],
|
||
iconAnchor: [16, 32],
|
||
popupAnchor: [0, -32],
|
||
});
|
||
|
||
markerObj.value = L.marker([lat, lng], {
|
||
icon: icon,
|
||
zIndexOffset: 1000, // 确保标记在热力图上方
|
||
});
|
||
|
||
// 绑定与主地图风格一致的弹窗内容
|
||
markerObj.value.bindPopup(`
|
||
<b>${row.warningSigns || "预警信息"}</b><br>
|
||
点位: ${row.pointName || "未知"}<br>
|
||
时间: ${row.releaseTime || "未知"}
|
||
`);
|
||
|
||
markersLayer.value.addLayer(markerObj.value);
|
||
markerObj.value.openPopup();
|
||
|
||
if (!showMarker.value) {
|
||
markersLayer.value.removeLayer(markerObj.value);
|
||
}
|
||
};
|
||
|
||
// 修改后的renderHeatmap函数，只显示一个圆圈
|
||
const renderHeatmap = (heatData) => {
|
||
// 清除现有热力图
|
||
clearHeatmap();
|
||
|
||
if (!mapInstance.value || !heatData || !heatData.length) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 获取第一条数据
|
||
const firstItem = heatData[0];
|
||
if (!firstItem) {
|
||
showNoData.value = true;
|
||
ElMessage.warning("没有有效的热力图数据");
|
||
return;
|
||
}
|
||
|
||
// 提取并验证经纬度和强度值
|
||
const lat = Number(
|
||
firstItem.latitude || firstItem.lat || firstItem.LAT || firstItem.Latitude
|
||
);
|
||
const lng = Number(
|
||
firstItem.longitude ||
|
||
firstItem.lng ||
|
||
firstItem.LNG ||
|
||
firstItem.Longitude
|
||
);
|
||
|
||
// 计算强度值
|
||
const enterValue = Number(
|
||
firstItem.enter || firstItem.count || firstItem.value || 50
|
||
);
|
||
|
||
let intensity;
|
||
if (enterValue <= 0) {
|
||
intensity = 30;
|
||
} else {
|
||
if (enterValue < 10000) {
|
||
intensity = 50;
|
||
} else if (enterValue < 100000) {
|
||
intensity = 70;
|
||
} else {
|
||
intensity = 100;
|
||
}
|
||
}
|
||
|
||
// 有效性检查
|
||
if (isNaN(lat) || isNaN(lng)) {
|
||
showNoData.value = true;
|
||
ElMessage.warning(`经纬度无效: lat=${lat}, lng=${lng}`);
|
||
console.error("无效的经纬度数据:", firstItem);
|
||
return;
|
||
}
|
||
|
||
if (!isInChina(lat, lng)) {
|
||
showNoData.value = true;
|
||
ElMessage.warning(`经纬度不在有效范围内: lat=${lat}, lng=${lng}`);
|
||
console.error("经纬度超出范围:", firstItem);
|
||
return;
|
||
}
|
||
|
||
// 只使用单个点
|
||
const points = [
|
||
[lat, lng, intensity], // 仅保留中心点位
|
||
];
|
||
|
||
// 确保热力图容器图层已添加到地图
|
||
if (!mapInstance.value.hasLayer(heatmapLayer.value)) {
|
||
mapInstance.value.addLayer(heatmapLayer.value);
|
||
}
|
||
|
||
// 创建热力图图层
|
||
currentHeatmapLayer = L.heatLayer(points, {
|
||
radius: 60, // 可以根据需要调整半径大小
|
||
blur: 40, // 可以根据需要调整模糊度
|
||
maxZoom: heatMaxZoom.value,
|
||
maxOpacity: 0.9,
|
||
gradient: {
|
||
0.1: "#FFEDA0",
|
||
0.3: "#FED976",
|
||
0.5: "#FEB24C",
|
||
0.7: "#FD8D3C",
|
||
0.9: "#FC4E2A",
|
||
1: "#E31A1C",
|
||
},
|
||
});
|
||
|
||
// 添加热力图到容器图层
|
||
heatmapLayer.value.addLayer(currentHeatmapLayer);
|
||
|
||
// 确保标记层在热力图上方
|
||
if (markersLayer.value) {
|
||
mapInstance.value.removeLayer(markersLayer.value);
|
||
mapInstance.value.addLayer(markersLayer.value);
|
||
}
|
||
|
||
// 显示图例
|
||
showLegend.value = true;
|
||
showNoData.value = false;
|
||
|
||
console.log(`成功渲染热力图，经纬度: (${lat}, ${lng})，强度: ${intensity}`);
|
||
} catch (error) {
|
||
console.error("热力图渲染失败:", error);
|
||
ElMessage.error(`热力图渲染失败: ${error.message}`);
|
||
}
|
||
};
|
||
|
||
// 更新热力图设置
|
||
const updateHeatmapSettings = () => {
|
||
if (currentRow.value && currentHeatmapLayer) {
|
||
clearHeatmap();
|
||
// 重新获取数据并渲染
|
||
getYJRLi({
|
||
srcIndex: currentRow.value.filePath || currentRow.value.id,
|
||
startTime: currentRow.value.releaseTime
|
||
? `${currentRow.value.releaseTime} 00:00:00`
|
||
: "",
|
||
endTime: currentRow.value.releaseTime
|
||
? `${currentRow.value.releaseTime} 23:59:59`
|
||
: "",
|
||
}).then((res) => {
|
||
if (res.code === 200 && res.data && res.data.length) {
|
||
renderHeatmap(res.data);
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
// 切换热力图显示 - 与主地图逻辑一致
|
||
const toggleHeatmap = () => {
|
||
showHeatmap.value = !showHeatmap.value;
|
||
|
||
if (showHeatmap.value) {
|
||
mapInstance.value.addLayer(heatmapLayer.value);
|
||
showLegend.value = true;
|
||
} else {
|
||
mapInstance.value.removeLayer(heatmapLayer.value);
|
||
showLegend.value = false;
|
||
}
|
||
};
|
||
|
||
// 切换标记显示
|
||
const toggleMarker = () => {
|
||
showMarker.value = !showMarker.value;
|
||
|
||
if (showMarker.value && markerObj.value) {
|
||
markersLayer.value.addLayer(markerObj.value);
|
||
} else if (markerObj.value) {
|
||
markersLayer.value.removeLayer(markerObj.value);
|
||
}
|
||
};
|
||
|
||
// 清除热力图 - 与主地图逻辑一致
|
||
const clearHeatmap = () => {
|
||
if (
|
||
currentHeatmapLayer &&
|
||
heatmapLayer.value &&
|
||
heatmapLayer.value.hasLayer(currentHeatmapLayer)
|
||
) {
|
||
heatmapLayer.value.removeLayer(currentHeatmapLayer);
|
||
}
|
||
currentHeatmapLayer = null;
|
||
};
|
||
|
||
// 查看监控
|
||
const lookJK = () => {
|
||
let params = {
|
||
typeinfo: filePathS.value,
|
||
};
|
||
getYJRLiJK(params).then((res) => {
|
||
console.log(res, "监控返回");
|
||
if (res.code === 200 && res.msg) {
|
||
currentVideoUrl.value = res.msg;
|
||
chargeOpenJK.value = true;
|
||
} else {
|
||
proxy.$modal.msgWarning("无监控数据");
|
||
}
|
||
});
|
||
};
|
||
const callDialog = ref(false);
|
||
const callForm = ref({});
|
||
// 外呼
|
||
const CALL = () => {
|
||
resetCall();
|
||
getPoints(currentWarningId.value).then((response) => {
|
||
console.log(response,'rq');
|
||
callForm.value = {
|
||
phone: response.data.dutyPhone
|
||
}
|
||
});
|
||
callDialog.value = true;
|
||
}
|
||
// 重置外呼内容
|
||
function resetCall() {
|
||
callDialog.value = false;
|
||
callForm.value = {};
|
||
}
|
||
// 关闭弹窗
|
||
const handleVideoClose = () => {
|
||
chargeOpenJK.value = false;
|
||
currentVideoUrl.value = "";
|
||
};
|
||
|
||
// 关闭弹窗清理 - 与主地图一致
|
||
const handleClose = () => {
|
||
if (mapInstance.value) {
|
||
mapInstance.value.off();
|
||
mapInstance.value.remove();
|
||
mapInstance.value = null;
|
||
}
|
||
warningModalOpen.value = false;
|
||
clearHeatmap();
|
||
showLegend.value = false;
|
||
};
|
||
|
||
// 查看处置详情
|
||
const handleLook = (row) => {
|
||
getchuzhiListDetail(row.warningId).then((res) => {
|
||
formInfo.value = res.data || {};
|
||
});
|
||
|
||
getchuzhiListLiucheng({ handleId: row.id }).then((res) => {
|
||
timelineData.value = res.rows || [];
|
||
chargeOpen.value = true;
|
||
});
|
||
};
|
||
|
||
// 检查是否在中国范围内 - 与主地图一致
|
||
const isInChina = (lat, lng) => {
|
||
return (
|
||
lat >= CHINA_BOUNDS.minLat &&
|
||
lat <= CHINA_BOUNDS.maxLat &&
|
||
lng >= CHINA_BOUNDS.minLng &&
|
||
lng <= CHINA_BOUNDS.maxLng
|
||
);
|
||
};
|
||
|
||
const getStatusLabel = (value) => {
|
||
const found = disposal_status.value.find((item) => item.value === value);
|
||
return found ? found.label : "未知状态";
|
||
};
|
||
|
||
// 加载表格数据
|
||
const loadTableData = () => {
|
||
getchuzhiList({ warningStatus: 1 })
|
||
.then((res) => {
|
||
tableData.value = res.rows || [];
|
||
})
|
||
.catch((err) => {
|
||
console.error("加载表格数据失败:", err);
|
||
ElMessage.error("加载表格数据失败");
|
||
});
|
||
};
|
||
|
||
// 初始化 - 修复Leaflet图标路径问题与主地图一致
|
||
onMounted(() => {
|
||
loadTableData();
|
||
|
||
// 修复Leaflet默认图标路径问题
|
||
if (!L.Icon.Default.prototype._getIconUrl) {
|
||
delete L.Icon.Default.prototype._getIconUrl;
|
||
L.Icon.Default.mergeOptions({
|
||
iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
|
||
iconUrl: require("leaflet/dist/images/marker-icon.png"),
|
||
shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@use "@/assets/styles/computed.scss" as calculate;
|
||
$tableColumnLength: 4;
|
||
$table__title__height: calculate.vh(45px);
|
||
$table__item__height: calculate.vh(35px);
|
||
.titles {
|
||
color: #fff;
|
||
text-align: center;
|
||
font-size: calculate.px2font(20px);
|
||
}
|
||
// 基础样式
|
||
.nocontent {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
&:deep(.el-empty) {
|
||
padding: calculate.vh(50px) 0;
|
||
.el-empty__image {
|
||
width: calculate.vw(100px) !important;
|
||
}
|
||
.el-empty__description {
|
||
margin-top: calculate.vh(40px);
|
||
p {
|
||
font-size: calculate.px2font(20px);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.callDemo {
|
||
&:deep(#demo) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
|
||
.el-button {
|
||
max-width: 100px;
|
||
}
|
||
}
|
||
}
|
||
// 弹窗样式
|
||
.detail-section {
|
||
height: 50%;
|
||
padding: 10px;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.map-controls {
|
||
height: 5%;
|
||
padding: 5px 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
box-sizing: border-box;
|
||
|
||
:deep(.el-slider) {
|
||
width: 150px;
|
||
}
|
||
}
|
||
|
||
.map-section {
|
||
height: calculate.vh(500px);
|
||
position: relative;
|
||
padding: calculate.vh(10px);
|
||
box-sizing: border-box;
|
||
margin-top: calculate.vh(10px);
|
||
}
|
||
|
||
#warningMap {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 4px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
// 地图状态样式 - 与主地图一致
|
||
.map-loading,
|
||
.no-data {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 1001;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.map-loading {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: #555;
|
||
}
|
||
|
||
// 热力图图例 - 与主地图完全一致
|
||
.map-legend {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
right: 20px;
|
||
z-index: 1000;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
color: #333;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
.map-legend h4 {
|
||
margin: 0 0 8px 0;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.legend-gradient {
|
||
height: 20px;
|
||
width: 180px;
|
||
background: linear-gradient(
|
||
to right,
|
||
#ffeda0,
|
||
/* 低 */ #fed976,
|
||
#feb24c,
|
||
#fd8d3c,
|
||
#fc4e2a,
|
||
#e31a1c /* 高 */
|
||
);
|
||
margin: 5px 0;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.legend-labels {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 12px;
|
||
color: #555;
|
||
}
|
||
|
||
.card__content-box {
|
||
.table {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
margin-top: 2vh;
|
||
// 表头容器 - 固定不滚动
|
||
&__header-container {
|
||
flex-shrink: 0; // 不缩小
|
||
border-bottom: 1px solid #888; // 增加分隔线
|
||
}
|
||
|
||
// 内容容器 - 可滚动
|
||
&__body-container {
|
||
flex-grow: 1; // 占满剩余空间
|
||
overflow-y: auto; // 允许垂直滚动
|
||
// 添加滚动条样式（可选）
|
||
&::-webkit-scrollbar {
|
||
width: 0;
|
||
}
|
||
&::-webkit-scrollbar-thumb {
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
border-radius: 3px;
|
||
}
|
||
}
|
||
|
||
&__item {
|
||
line-height: $table__item__height;
|
||
display: grid;
|
||
grid-template-columns: 2fr repeat(4, minmax(0, 3fr));
|
||
color: #fff;
|
||
text-align: center;
|
||
font-size: calculate.px2font(14px);
|
||
font-weight: bold;
|
||
border-radius: calculate.px2font(2px);
|
||
padding: calculate.vh(7px) 0;
|
||
cursor: pointer;
|
||
border-bottom: 10px solid #0b2342; // 红色分隔线（若只需纯间距可删除此句）
|
||
// background-color: #29689e;
|
||
}
|
||
|
||
&__item:nth-child(2n) {
|
||
// background-color: #3c93d2;
|
||
}
|
||
|
||
&__item:hover {
|
||
box-shadow: inset 0 0 0 calculate.px2font(3px) #266fff;
|
||
}
|
||
|
||
// 表头样式
|
||
&__header {
|
||
font-weight: bold;
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
}
|
||
// 时间线样式
|
||
.custom-timeline {
|
||
position: relative;
|
||
padding-left: 20px;
|
||
margin-top: 4%;
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
padding-bottom: 20px;
|
||
|
||
&:not(:last-child)::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: -2px;
|
||
top: 16px;
|
||
height: calc(100% - 16px);
|
||
width: 2px;
|
||
background: #e4e7ed;
|
||
}
|
||
}
|
||
|
||
.timeline-dot {
|
||
position: absolute;
|
||
left: -8px;
|
||
top: 4px;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: #409eff;
|
||
}
|
||
|
||
.timeline-content {
|
||
padding-left: 20px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.tooltip {
|
||
width: 98%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// 图层层级控制 - 与主地图完全一致
|
||
:deep(.leaflet-map-pane) {
|
||
z-index: 2 !important;
|
||
}
|
||
:deep(.leaflet-tile-pane) {
|
||
z-index: 2 !important;
|
||
} /* 底图 */
|
||
:deep(.leaflet-overlay-pane) {
|
||
z-index: 3 !important;
|
||
} /* 热力图在底图上方 */
|
||
:deep(.leaflet-marker-pane) {
|
||
z-index: 4 !important;
|
||
} /* 标记在热力图上方 */
|
||
:deep(.leaflet-popup-pane) {
|
||
z-index: 5 !important;
|
||
} /* 弹窗在最上方 */
|
||
.largeScreen__descriptions {
|
||
:deep(.el-button){
|
||
background: #0479fe;
|
||
}
|
||
}
|
||
</style>
|