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>
|