Merge branch 'dev' of http://222.212.85.86:8222/bdzl2/bxztApp into dev
This commit is contained in:
commit
27ff5b5764
@ -1,14 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||
<title>H5移动端</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||
<title>H5移动端</title>
|
||||
<script>
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: "08c037da44c78afd7338203268c2d2a5"
|
||||
};
|
||||
</script>
|
||||
<script src="https://webapi.amap.com/loader.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -211,6 +211,7 @@ import { ref, onMounted, reactive, toRaw, watch } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { showToast, showLoadingToast } from "vant";
|
||||
import { request } from "../../../../shared/utils/request";
|
||||
import { loadAMap } from "../../../../shared/utils/aMap";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
@ -218,7 +219,7 @@ const searchValue = ref(""); // 搜索框输入值
|
||||
const showPopup = ref(false); // 控制弹出层显示隐藏
|
||||
const yhzDetail = ref({}); // 养护站详情数据
|
||||
const materialList = ref([]); // 物资列表数据
|
||||
const INIT_FORM = {
|
||||
const getInitForm = () => ({
|
||||
material: {
|
||||
jd: "", // 物资经度
|
||||
wd: "", // 物资纬度
|
||||
@ -238,8 +239,8 @@ const INIT_FORM = {
|
||||
remark: "", // 备注
|
||||
},
|
||||
photos: [],
|
||||
};
|
||||
const form = reactive({ ...INIT_FORM }); // 表单
|
||||
});
|
||||
const form = reactive(getInitForm());
|
||||
|
||||
// 根据养护站rid获取物资列表
|
||||
const getMaterialList = async (wzmc) => {
|
||||
@ -281,15 +282,6 @@ onMounted(() => {
|
||||
|
||||
// 购置日期相关
|
||||
const showTimePicker = ref(false);
|
||||
const currentDate = ref([
|
||||
new Date().getFullYear(),
|
||||
new Date().getMonth() + 1,
|
||||
new Date().getDate(),
|
||||
]);
|
||||
const onDateConfirm = ({ selectedValues }) => {
|
||||
form.rkrq = selectedValues.join("-");
|
||||
showTimePicker.value = false;
|
||||
};
|
||||
|
||||
// 选择单位相关
|
||||
const dwField = ref(null);
|
||||
@ -338,7 +330,6 @@ const handleSubmit = async () => {
|
||||
message: "新增成功",
|
||||
});
|
||||
onPopupClose();
|
||||
Object.assign(form, { ...INIT_FORM });
|
||||
getMaterialList(searchValue.value);
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
@ -423,37 +414,38 @@ const afterRead = async (file) => {
|
||||
};
|
||||
|
||||
// 获取经纬度
|
||||
const handleGetLocation = () => {
|
||||
if (!navigator.geolocation) {
|
||||
showToast("您的浏览器不支持地理位置获取");
|
||||
return;
|
||||
const handleGetLocation = async () => {
|
||||
// 确保AMap完成加载
|
||||
if (!window.AMap) {
|
||||
await loadAMap();
|
||||
}
|
||||
|
||||
showLoadingToast({
|
||||
message: "定位中...",
|
||||
const loadingToast = showLoadingToast({
|
||||
message: "正在获取位置",
|
||||
forbidClick: true,
|
||||
duration: 0, // 设置为0表示不会自动关闭
|
||||
zIndex: 9999,
|
||||
});
|
||||
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
form.material.jd = position.coords.longitude.toFixed(6);
|
||||
form.material.wd = position.coords.latitude.toFixed(6);
|
||||
},
|
||||
(error) => {
|
||||
const errorMessage =
|
||||
{
|
||||
1: "位置服务被拒绝",
|
||||
2: "暂时无法获取位置",
|
||||
3: "定位超时",
|
||||
}[error.code] || "定位失败";
|
||||
showToast(errorMessage);
|
||||
},
|
||||
{
|
||||
enableHighAccuracy: true, // 高精度模式
|
||||
timeout: 5000, // 超时时间
|
||||
maximumAge: 0, // 不缓存位置
|
||||
}
|
||||
);
|
||||
AMap.plugin("AMap.Geolocation", () => {
|
||||
const geolocation = new AMap.Geolocation({
|
||||
enableHighAccuracy: true,
|
||||
timeout: 5000,
|
||||
showMarker: false,
|
||||
zoomToAccuracy: true,
|
||||
});
|
||||
|
||||
geolocation.getCurrentPosition((status, result) => {
|
||||
if (status === "complete") {
|
||||
form.material.jd = result.position.lng.toFixed(6);
|
||||
form.material.wd = result.position.lat.toFixed(6);
|
||||
loadingToast.close();
|
||||
} else {
|
||||
loadingToast.close();
|
||||
showToast(result);
|
||||
console.log("result", result);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
@ -505,6 +497,9 @@ const handleAdd = async () => {
|
||||
};
|
||||
|
||||
const onPopupClose = () => {
|
||||
Object.assign(form, getInitForm());
|
||||
fileList.value = [];
|
||||
[showDwPicker, showFzrPicker].forEach((v) => (v.value = false));
|
||||
showPopup.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -9,17 +9,18 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.5.18",
|
||||
"vue-router": "^4.6.3",
|
||||
"pinia": "^3.0.3",
|
||||
"element-plus": "^2.11.5",
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"echarts": "^6.0.0",
|
||||
"vue-echarts": "^8.0.1",
|
||||
"cesium": "^1.135.0",
|
||||
"axios": "^1.13.2",
|
||||
"@h5/shared": "workspace:*",
|
||||
"@turf/turf": "^7.3.0",
|
||||
"@vueuse/core": "^14.0.0",
|
||||
"@h5/shared": "workspace:*"
|
||||
"axios": "^1.13.2",
|
||||
"cesium": "^1.135.0",
|
||||
"echarts": "^6.0.0",
|
||||
"element-plus": "^2.11.5",
|
||||
"pinia": "^3.0.3",
|
||||
"vue": "^3.5.18",
|
||||
"vue-echarts": "^8.0.1",
|
||||
"vue-router": "^4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
|
||||
@ -10,6 +10,9 @@ const routes = [
|
||||
{
|
||||
path: '/cockpit',
|
||||
name: 'Cockpit',
|
||||
meta: {
|
||||
screen: true
|
||||
},
|
||||
component: () => import('../views/cockpit/index.vue')
|
||||
},
|
||||
{
|
||||
|
||||
@ -2,7 +2,6 @@ import { request } from '@shared/utils/request'
|
||||
|
||||
// 获取业务底图
|
||||
export function getBaseMap() {
|
||||
// return [...ddt]
|
||||
return request({
|
||||
url: '/snow-ops-platform/dataDirectory/queryCatalog',
|
||||
method: 'GET',
|
||||
@ -14,7 +13,6 @@ export function getBaseMap() {
|
||||
|
||||
// 获取业务图
|
||||
export function getBusinessMap() {
|
||||
// return [...si]
|
||||
return request({
|
||||
url: '/snow-ops-platform/dataDirectory/queryCatalog',
|
||||
method: 'GET',
|
||||
@ -24,6 +22,48 @@ export function getBusinessMap() {
|
||||
})
|
||||
}
|
||||
|
||||
// 获取所有的养护站
|
||||
export function getAllYHZList() {
|
||||
return request({
|
||||
url: '/snow-ops-platform/yhz/listByDistrict',
|
||||
method: 'get',
|
||||
params: {
|
||||
qxmc: ''
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getYHZDetail(params) {
|
||||
return request({
|
||||
url: '/snow-ops-platform/yhz/getById',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 获得高海拔路段图 high-altitude road
|
||||
export function getHighAltitudeRoadMap () {
|
||||
return request({
|
||||
url: '/snow-ops-platform/dataDirectory/queryCatalog',
|
||||
method: 'GET',
|
||||
params: {
|
||||
pcatalog: 'GHBMAP'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取天气预警统计
|
||||
export function getWeatherWarningStatistics (params) {
|
||||
return request({
|
||||
url: '/snow-ops-platform/weatherWarning/statistics',
|
||||
method: 'GET',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 183 KiB |
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="cockpit-layout">
|
||||
<!-- <PageHeader /> -->
|
||||
<PageHeader />
|
||||
<div class="cockpit-main">
|
||||
<!-- 地图底层 -->
|
||||
<div class="map-layer">
|
||||
@ -13,8 +14,8 @@
|
||||
<!-- 浮动面板层 -->
|
||||
<div class="panels-layer">
|
||||
<div class="panel-column left-panel">
|
||||
<WeatherWarning />
|
||||
<EmergencyResources />
|
||||
<WeatherWarning ref="weatherWarningRef" />
|
||||
<EmergencyResources @clickEmergencyResource="handleEmergencyResourceClick" />
|
||||
</div>
|
||||
|
||||
<div class="center-spacer" aria-hidden="true"></div>
|
||||
@ -26,17 +27,14 @@
|
||||
</div>
|
||||
|
||||
<!-- 图例工具栏 -->
|
||||
<LegendToolbar class="legend-toolbar" :legendKeys="legendKeys" @marker-toggle="handleLegendMarkerToggle" />
|
||||
<LegendToolbar class="legend-toolbar" v-model="legendToolActiveItem" :legendKeys="legendKeys"
|
||||
@marker-toggle="handleLegendMarkerToggle" />
|
||||
|
||||
<!-- 应急力量详情提示框 -->
|
||||
<EmergencyForceTooltip
|
||||
:visible="emergencyForceInteraction.tooltipVisible.value"
|
||||
:position="emergencyForceInteraction.tooltipPosition.value"
|
||||
:data="emergencyForceInteraction.tooltipData.value"
|
||||
:loading="emergencyForceInteraction.loading.value"
|
||||
:error="emergencyForceInteraction.error.value"
|
||||
@close="emergencyForceInteraction.hideTooltip"
|
||||
/>
|
||||
<EmergencyForceTooltip :visible="emergencyForceInteraction.tooltipVisible.value"
|
||||
:position="emergencyForceInteraction.tooltipPosition.value" :data="emergencyForceInteraction.tooltipData.value"
|
||||
:loading="emergencyForceInteraction.loading.value" :error="emergencyForceInteraction.error.value"
|
||||
@close="emergencyForceInteraction.hideTooltip" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -60,9 +58,11 @@ import LegendToolbar from './LegendToolbar.vue'
|
||||
import EmergencyForceTooltip from './EmergencyForceTooltip.vue'
|
||||
import emergencyForceMarkerIcon from '../assets/legendTool/应急力量icon定位.png'
|
||||
|
||||
onMounted(()=>{
|
||||
onMounted(() => {
|
||||
// 加载地图业务底图 并 聚焦中心点
|
||||
mapBase.loadBaseData()
|
||||
|
||||
weatherWarningRef.value.loadData()
|
||||
})
|
||||
|
||||
// ==================== 常量定义 ====================
|
||||
@ -79,6 +79,9 @@ const EMERGENCY_FORCE_LAYER_ID = 'legend:emergencyForce'
|
||||
*/
|
||||
const EMERGENCY_FORCE_CACHE_TTL = 60 * 1000
|
||||
|
||||
// ==================== 组件实例 ====================
|
||||
const weatherWarningRef = ref(null)
|
||||
|
||||
// ==================== 状态管理 ====================
|
||||
|
||||
const mapStore = useMapStore()
|
||||
@ -101,7 +104,7 @@ const mapBase = useMapBase(mapStore)
|
||||
/**
|
||||
* 标记图hook，搭配lengendToolbar使用, 作用是点击某个图例项时，在地图上显示所有该图例的图
|
||||
*/
|
||||
const mapImageMark = useMapImageMark(mapStore)
|
||||
const mapImageMarkHook = useMapImageMark(mapStore)
|
||||
|
||||
/**
|
||||
* 应急力量数据加载状态
|
||||
@ -131,8 +134,21 @@ const emergencyForceAbortController = ref(null)
|
||||
/**
|
||||
* 工具图标列表通过key关联
|
||||
* key具体有哪些，请根据LegendToolbar.vue中定义的defaultLegendItems
|
||||
* 后续的ImageMarkData中也需要与这里的key值对应
|
||||
*/
|
||||
const legendKeys = ref(['serviceFacility','riskRoad','blockEvent','weatherAlert','emergencyForce'])
|
||||
const legendKeys = ref(['serviceFacility', 'riskRoad', 'blockEvent', 'weatherAlert', 'emergencyForce'])
|
||||
|
||||
/**
|
||||
* 过滤标记对象，存放当前需要过滤的关键字
|
||||
*/
|
||||
const filterMark = ref({
|
||||
serviceFacility: []
|
||||
})
|
||||
|
||||
/**
|
||||
* 图例项
|
||||
*/
|
||||
const legendToolActiveItem = ref([])
|
||||
|
||||
// ==================== 工具函数 ====================
|
||||
|
||||
@ -413,6 +429,48 @@ const renderEmergencyForcePoints = async (entityService, points, markerIcon) =>
|
||||
|
||||
// ==================== 事件处理 ====================
|
||||
|
||||
/**
|
||||
* 应急资源表格行被点击时触发
|
||||
*/
|
||||
const handleEmergencyResourceClick = (resource) => {
|
||||
let focusKey = null
|
||||
|
||||
// 根据区县名称，过滤养护站
|
||||
const filterList = filterMark.value.serviceFacility
|
||||
const index = filterList.findIndex((item) => item == resource.qxmc)
|
||||
// 实现第一次点击表示选中，第二次点击表示取消选中
|
||||
if (index > -1) {
|
||||
filterList.splice(index, 1)
|
||||
}
|
||||
else {
|
||||
filterList.push(resource.qxmc)
|
||||
focusKey = resource.qxmc
|
||||
}
|
||||
|
||||
// 当点击了某个区县，需要将养护站的legend也点亮
|
||||
const legendIndex = legendToolActiveItem.value.indexOf('serviceFacility')
|
||||
// 如果过滤列表存在数据，则需要点亮legend
|
||||
if (filterList.length && legendIndex == -1) {
|
||||
legendToolActiveItem.value.push('serviceFacility')
|
||||
}
|
||||
// 如果过滤列表不存在，则需要关闭legend
|
||||
if (!filterList.length && legendIndex > -1) {
|
||||
legendToolActiveItem.value.splice(legendIndex, 1)
|
||||
}
|
||||
|
||||
// 调用图例hook来进行数据的请求与图例的绘制，第一个回调函数是过滤点位，第二个是聚焦点位
|
||||
mapImageMarkHook.filterYHZMark(
|
||||
"serviceFacility",
|
||||
(item) => {
|
||||
return filterList.find((filterItem) => filterItem == item.qxmc)
|
||||
},
|
||||
(item) => {
|
||||
return item.qxmc == focusKey
|
||||
}
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理图例工具栏的标记切换事件
|
||||
*
|
||||
@ -422,10 +480,19 @@ const renderEmergencyForcePoints = async (entityService, points, markerIcon) =>
|
||||
* @param {string} [payload.markerIcon] - 标记图标
|
||||
*/
|
||||
const handleLegendMarkerToggle = async ({ key, active, markerIcon }) => {
|
||||
if (key === 'riskRoad') {
|
||||
mapBase.toggleHighAltitudeRoadMap(active)
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
// 只处理应急力量图例项
|
||||
if (key !== 'emergencyForce') {
|
||||
if (active == false) {
|
||||
filterMark.value[key] = []
|
||||
}
|
||||
|
||||
mapImageMark.toggleMark({ key, active, markerIcon })
|
||||
mapImageMarkHook.toggleMark({ key, active, markerIcon })
|
||||
|
||||
return
|
||||
}
|
||||
@ -552,6 +619,7 @@ onBeforeUnmount(() => {
|
||||
@supports (width: 1cqw) {
|
||||
--cq-inline-100: 100cqw;
|
||||
}
|
||||
|
||||
@supports (height: 1cqh) {
|
||||
--cq-block-100: 100cqh;
|
||||
}
|
||||
@ -568,13 +636,15 @@ onBeforeUnmount(() => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: var(--cockpit-min-height);
|
||||
min-width: 0; /* 允许 flex 子元素收缩 */
|
||||
min-width: 0;
|
||||
/* 允许 flex 子元素收缩 */
|
||||
|
||||
background: url(../assets/img/cockpit-main-bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto; /* 当宿主高度 < 最小高度时允许滚动 */
|
||||
overflow: auto;
|
||||
/* 当宿主高度 < 最小高度时允许滚动 */
|
||||
}
|
||||
|
||||
/* 窄容器嵌入的紧凑布局（<1100px 宽度）*/
|
||||
@ -586,8 +656,10 @@ onBeforeUnmount(() => {
|
||||
.cockpit-main {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0; /* 允许网格在 flex 上下文中收缩 */
|
||||
overflow: hidden; /* 防止内容溢出 */
|
||||
min-height: 0;
|
||||
/* 允许网格在 flex 上下文中收缩 */
|
||||
overflow: hidden;
|
||||
/* 防止内容溢出 */
|
||||
}
|
||||
|
||||
/* 地图底层 - 填满整个容器 */
|
||||
@ -603,7 +675,8 @@ onBeforeUnmount(() => {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none; /* 不阻挡交互 */
|
||||
pointer-events: none;
|
||||
/* 不阻挡交互 */
|
||||
background: url(../assets/img/遮罩层.png) no-repeat center/cover;
|
||||
}
|
||||
|
||||
@ -617,7 +690,8 @@ onBeforeUnmount(() => {
|
||||
gap: var(--cockpit-gap);
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none; /* 容器不拦截事件，让中间区域透明 */
|
||||
pointer-events: none;
|
||||
/* 容器不拦截事件，让中间区域透明 */
|
||||
}
|
||||
|
||||
/* 中间占位区域 - 透明且不可交互，点击穿透到地图 */
|
||||
@ -630,10 +704,13 @@ onBeforeUnmount(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cockpit-gap);
|
||||
min-width: 0; /* 防止在窄容器中溢出 */
|
||||
min-height: 0; /* 允许 flex 子元素收缩并启用滚动 */
|
||||
min-width: 0;
|
||||
/* 防止在窄容器中溢出 */
|
||||
min-height: 0;
|
||||
/* 允许 flex 子元素收缩并启用滚动 */
|
||||
padding: 1rem;
|
||||
pointer-events: auto; /* 恢复面板的交互能力 */
|
||||
pointer-events: auto;
|
||||
/* 恢复面板的交互能力 */
|
||||
}
|
||||
|
||||
/* 图例工具栏 - 居中显示在底部 */
|
||||
@ -643,6 +720,7 @@ onBeforeUnmount(() => {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 3;
|
||||
pointer-events: auto; /* 确保图例可交互 */
|
||||
pointer-events: auto;
|
||||
/* 确保图例可交互 */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
:class="{ 'row-alt': index % 2 === 0 }"
|
||||
>
|
||||
<div class="row-number">{{ index + 1 }}</div>
|
||||
<span class="district-name">{{ resource.qxmc }}</span>
|
||||
<span class="district-name" @click="emit('clickEmergencyResource' , resource)">{{ resource.qxmc }}</span>
|
||||
<span class="count green">{{ resource.yhzCount }}</span>
|
||||
<span class="count orange">{{ resource.wzCount }}</span>
|
||||
<div class="equipment-cell">
|
||||
@ -43,7 +43,9 @@
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { request } from '@shared/utils/request'
|
||||
|
||||
const resources = ref([
|
||||
const emit = defineEmits(['clickEmergencyResource'])
|
||||
|
||||
const testData = [
|
||||
{
|
||||
id: 1,
|
||||
name: '万州区',
|
||||
@ -98,7 +100,9 @@ const resources = ref([
|
||||
equipmentClass: 'red',
|
||||
hasAlert: false
|
||||
}
|
||||
])
|
||||
]
|
||||
|
||||
const resources = ref([])
|
||||
|
||||
// 请求后端接口 /district/statistics
|
||||
const getDistrictStatistics = async () => {
|
||||
@ -106,7 +110,6 @@ const getDistrictStatistics = async () => {
|
||||
url: '/snow-ops-platform/district/statistics',
|
||||
method: 'GET'
|
||||
})
|
||||
console.log(res)
|
||||
if(res.code === '00000') {
|
||||
resources.value = res.data
|
||||
} else {
|
||||
@ -240,6 +243,7 @@ onMounted(() => {
|
||||
|
||||
.district-name {
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.count {
|
||||
|
||||
@ -11,8 +11,32 @@
|
||||
</button>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="tooltip-content">
|
||||
<component v-if="hasData" :is="contentMap[data.mapData.layerId]" :data="data" />
|
||||
<div class="tooltip-content" v-if="!loading && detail">
|
||||
|
||||
<div class="info-item">
|
||||
<span class="label">名称:</span>
|
||||
<span class="value">{{ detail.mc }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<span class="label">所属区县：</span>
|
||||
<span class="value">{{ detail.qxmc }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<span class="label">应急设备：</span>
|
||||
<span class="value">{{ detail.sbsl }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<span class="label">应急物资：</span>
|
||||
<span class="value">{{ detail.wzsl }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<span class="label">应急人员：</span>
|
||||
<span class="value">{{ detail.rysl }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 如果没有数据 -->
|
||||
<div v-if="!hasData" class="no-data">
|
||||
@ -36,11 +60,7 @@
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import serviceFacility from './serviceFacility.vue'
|
||||
import riskRoad from './riskRoad.vue'
|
||||
import weatherAlert from './weatherAlert.vue'
|
||||
import blockEvent from './blockEvent.vue'
|
||||
|
||||
import { getYHZDetail } from '@/views/cockpit/api/commonHttp.js'
|
||||
/**
|
||||
* 应急力量详情提示框组件
|
||||
* 使用 HTML Overlay 方式显示在地图标记点上方
|
||||
@ -75,14 +95,6 @@ const props = defineProps({
|
||||
default: () => ({})
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载状态
|
||||
*/
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
/**
|
||||
* 错误信息
|
||||
*/
|
||||
@ -93,16 +105,10 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
// ==================== State ====================
|
||||
const contentMap = ref({
|
||||
// 养护站内容
|
||||
serviceFacility,
|
||||
// 高海拔道路
|
||||
riskRoad,
|
||||
// 阻断事件
|
||||
blockEvent,
|
||||
// 气象预警
|
||||
weatherAlert,
|
||||
})
|
||||
|
||||
const title = ref('养护站')
|
||||
const detail = ref(null)
|
||||
const loading = ref(true)
|
||||
|
||||
// ==================== Emits ====================
|
||||
|
||||
@ -117,22 +123,22 @@ const hasData = computed(() => {
|
||||
return !!props.data
|
||||
})
|
||||
|
||||
const title = computed(() => {
|
||||
if (props.data.mapData.layerId === 'serviceFacility') {
|
||||
return '养护站'
|
||||
}
|
||||
if (props.data.mapData.layerId === 'riskRoad') {
|
||||
return '高海拔路段'
|
||||
}
|
||||
if (props.data.mapData.layerId === 'blockEvent') {
|
||||
return '阻断事件'
|
||||
}
|
||||
if (props.data.mapData.layerId === 'weatherAlert') {
|
||||
return '气象预警'
|
||||
}
|
||||
})
|
||||
|
||||
// ==================== Methods ====================
|
||||
// 这个方法会在index.js中被执行
|
||||
const init = () => {
|
||||
getDetail()
|
||||
}
|
||||
|
||||
const getDetail = async () => {
|
||||
loading.value = true
|
||||
const res = await getYHZDetail({
|
||||
id: props.data.id
|
||||
})
|
||||
if (res.success) {
|
||||
detail.value = res.data
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理关闭按钮点击
|
||||
@ -140,11 +146,22 @@ const title = computed(() => {
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/mixins.scss' as *;
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.common-tooltip {
|
||||
// CSS 变量：控制背景图片尺寸和内边距
|
||||
// 注意：修改图片资源时，需要同步更新这些高度值以匹配实际 PNG 尺寸
|
||||
@ -161,7 +178,7 @@ const handleClose = () => {
|
||||
transform: translate(-50%, calc(-100% - 20px));
|
||||
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
width: 300px;
|
||||
|
||||
// 上下 padding 需要容纳顶部和底部图片 + 内容间距
|
||||
// 左右 padding 保持一致
|
||||
@ -262,25 +279,43 @@ const handleClose = () => {
|
||||
|
||||
// 内容区域
|
||||
.tooltip-content {
|
||||
padding-right: 1.5rem; // 为关闭按钮留出空间
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 1fr;
|
||||
gap: 5px;
|
||||
|
||||
.info-item:first-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
// padding-right: 1.5rem; // 为关闭按钮留出空间
|
||||
}
|
||||
|
||||
.mb {
|
||||
margin-bottom: 0.5rem
|
||||
}
|
||||
|
||||
// 信息项
|
||||
.info-item {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
white-space: nowrap;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-right: 0.5rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #fff;
|
||||
font-family: SourceHanSansCN, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #14FFF6;
|
||||
line-height: 21px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
import { createVNode, render } from 'vue'
|
||||
import ImageMarkTooltip from './ImageMarkTooltip.vue'
|
||||
import serviceFacility from './YHZTooltip.vue'
|
||||
|
||||
class ImageMarkTooltipUI {
|
||||
constructor() {
|
||||
const UIMap = {
|
||||
serviceFacility
|
||||
}
|
||||
|
||||
class ImageMarkTooltip {
|
||||
constructor({ key }) {
|
||||
this.key = key
|
||||
this.instance = null
|
||||
this.container = null
|
||||
this.entity = null
|
||||
@ -22,8 +27,10 @@ class ImageMarkTooltipUI {
|
||||
|
||||
this.entity = options.entity
|
||||
|
||||
const UIInstance = UIMap[this.key]
|
||||
|
||||
// 创建 VNode
|
||||
const vnode = createVNode(ImageMarkTooltip, {
|
||||
const vnode = createVNode(UIInstance, {
|
||||
visible: true,
|
||||
position: options.position || { x: 0, y: 0 },
|
||||
data: options.data || {},
|
||||
@ -37,6 +44,9 @@ class ImageMarkTooltipUI {
|
||||
// 渲染到容器
|
||||
render(vnode, this.container)
|
||||
this.instance = vnode.component
|
||||
if(this.instance.exposed?.init) {
|
||||
this.instance.exposed.init()
|
||||
}
|
||||
return this.instance
|
||||
}
|
||||
|
||||
@ -68,11 +78,7 @@ class ImageMarkTooltipUI {
|
||||
}
|
||||
}
|
||||
|
||||
// 创建单例实例
|
||||
const instance = new ImageMarkTooltipUI()
|
||||
|
||||
export const CommonTooltip = instance
|
||||
|
||||
export const newImageMarkTooltip = () => {
|
||||
return new ImageMarkTooltipUI()
|
||||
export const newImageMarkTooltip = ({ key }) => {
|
||||
return new ImageMarkTooltip({ key })
|
||||
}
|
||||
@ -1,5 +1,23 @@
|
||||
<template>
|
||||
<div class="tool-tip-content">
|
||||
|
||||
<div class="info-item">
|
||||
<span class="label">名称:</span>
|
||||
<span class="value">{{ data.mc }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="info-item">
|
||||
<span class="label">所属区县：</span>
|
||||
<span class="value">{{ data.yjllpz }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<span class="label">应急设备：</span>
|
||||
<span class="value">{{ data.wz }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<div class="content" v-if="data">
|
||||
<div class="info-item">
|
||||
<span class="label">名称:</span>
|
||||
<span class="value">{{ data.mc }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="info-item">
|
||||
<span class="label">所属区县：</span>
|
||||
<span class="value">{{ data.yjllpz }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<span class="label">应急物资：</span>
|
||||
<span class="value">{{ data.wz }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/mixins.scss' as *;
|
||||
|
||||
// 信息项
|
||||
.info-item {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,6 @@
|
||||
<template>
|
||||
<header class="page-header">
|
||||
<div class="header-bg">
|
||||
<h1 class="title">安全保通服务</h1>
|
||||
<button class="app-button">应用</button>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
@ -14,7 +12,7 @@
|
||||
@use '@/styles/mixins.scss' as *;
|
||||
|
||||
.page-header {
|
||||
height: vh(137);
|
||||
height: vw(111);
|
||||
background: url(../assets/img/header-bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
@ -23,15 +21,6 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
background-image: url(../assets/img/header-title-bg.png);
|
||||
width: 100%;
|
||||
height: vh(107);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
@ -43,24 +32,4 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-button {
|
||||
position: absolute;
|
||||
right: vw(40);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: vw(165);
|
||||
height: vh(44);
|
||||
background: url(../assets/img/header-btn-app-bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: fs(16);
|
||||
font-family: SourceHanSansCN-Regular, sans-serif;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -66,6 +66,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { getWeatherWarningStatistics } from '@/views/cockpit/api/commonHttp.js'
|
||||
|
||||
// 导入图片
|
||||
import glowTopIcon from '../assets/img/weather-badge-glow-top.png'
|
||||
@ -79,7 +80,8 @@ const warningLevels = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '蓝色预警',
|
||||
count: 320,
|
||||
key: 'blueWarningCount',
|
||||
count: 0,
|
||||
color: 'rgba(132, 199, 255, 1)',
|
||||
glowTopIcon: glowTopIcon,
|
||||
glowBottomIcon: glowBottomIcon,
|
||||
@ -88,7 +90,8 @@ const warningLevels = ref([
|
||||
{
|
||||
id: 2,
|
||||
name: '黄色预警',
|
||||
count: 36,
|
||||
key: 'yellowWarningCount',
|
||||
count: 0,
|
||||
color: 'rgba(215, 209, 38, 1)',
|
||||
glowTopIcon: glowTopIcon,
|
||||
glowBottomIcon: glowBottomIcon,
|
||||
@ -97,7 +100,8 @@ const warningLevels = ref([
|
||||
{
|
||||
id: 3,
|
||||
name: '橙色预警',
|
||||
count: 2,
|
||||
key: 'orangeWarningCount',
|
||||
count: 0,
|
||||
color: 'rgba(255, 114, 0, 1)',
|
||||
glowTopIcon: glowTopIcon,
|
||||
glowBottomIcon: glowBottomIcon,
|
||||
@ -106,7 +110,8 @@ const warningLevels = ref([
|
||||
{
|
||||
id: 4,
|
||||
name: '红色预警',
|
||||
count: 1,
|
||||
key: 'redWarningCount',
|
||||
count: 0,
|
||||
color: 'rgba(255, 32, 0, 1)',
|
||||
glowTopIcon: glowTopIcon,
|
||||
glowBottomIcon: glowBottomIcon,
|
||||
@ -121,6 +126,24 @@ const districts = ref([
|
||||
{ id: 4, name: '涪陵区', km: 35, warning: '蓝色预警', warningColor: 'rgba(47, 156, 246, 1)' },
|
||||
{ id: 5, name: '合川区', km: 46, warning: '蓝色预警', warningColor: 'rgba(47, 156, 246, 1)' }
|
||||
])
|
||||
|
||||
const loadData = async (areaCode) => {
|
||||
const param = {
|
||||
areaCode: areaCode || ''
|
||||
}
|
||||
const res = await getWeatherWarningStatistics(param)
|
||||
if(res.success) {
|
||||
for(const item of warningLevels.value) {
|
||||
item.count = res.data[item.key]
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
loadData
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -11,16 +11,19 @@ export default class ImageMarkData {
|
||||
cacheData = null
|
||||
expiresAt = null
|
||||
abortController = null
|
||||
loading = false
|
||||
/**
|
||||
* 60秒内重复点击使用缓存数据，减少服务器压力
|
||||
*/
|
||||
cacheTime = 60 * 1000
|
||||
|
||||
constructor({ api, tooltip, onResponse }) {
|
||||
constructor({ api, tooltip, markerIcon, onResponse, key }) {
|
||||
this.api = api
|
||||
this.key = key
|
||||
this.response = onResponse
|
||||
this.markerIcon = markerIcon
|
||||
// 初始化提示框
|
||||
this.tooltip = tooltip || newImageMarkTooltip()
|
||||
this.tooltip = tooltip || newImageMarkTooltip({key})
|
||||
}
|
||||
|
||||
getCache = () => {
|
||||
@ -37,7 +40,7 @@ export default class ImageMarkData {
|
||||
// 首先查看缓存是否可用
|
||||
const cacheData = this.getCache()
|
||||
if (cacheData) return cacheData
|
||||
|
||||
this.loading = true
|
||||
const controller = this.createAbortController()
|
||||
const config = {}
|
||||
if (controller) config.signal = controller.signal
|
||||
@ -47,6 +50,7 @@ export default class ImageMarkData {
|
||||
} catch (error) {
|
||||
console.error('请求失败: ', error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
let data = null
|
||||
if (this.response) data = this.response(res)
|
||||
else data = this.commonOnResponse(res)
|
||||
@ -81,7 +85,6 @@ export default class ImageMarkData {
|
||||
// 通用的响应处理
|
||||
commonOnResponse = (res) => {
|
||||
if (res?.success) {
|
||||
res.data = res.data.slice(0, 2)
|
||||
const dataList = res.data.map((item) => {
|
||||
item.mapData = {
|
||||
id: this.key + '-' + item.rid,
|
||||
@ -91,7 +94,6 @@ export default class ImageMarkData {
|
||||
}
|
||||
return item
|
||||
})
|
||||
this.data = dataList
|
||||
return dataList
|
||||
}
|
||||
return []
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { getBaseMap, getBusinessMap } from '@/views/cockpit/api/commonHttp.js'
|
||||
import { getBaseMap, getBusinessMap, getHighAltitudeRoadMap } from '@/views/cockpit/api/commonHttp.js'
|
||||
import * as Cesium from 'cesium'
|
||||
|
||||
|
||||
@ -6,6 +6,8 @@ import * as Cesium from 'cesium'
|
||||
// 主要是加载地图底图
|
||||
export const useMapBase = (mapStore) => {
|
||||
|
||||
let hightAltitudeRoadMapId
|
||||
|
||||
// 加载当前业务的底图, 类似于天地图，但是没有使用天地图作为底图，有大的地块的地形纹理，但是缩小范围很小，属于比较粗的图
|
||||
const loadBaseMap = async () => {
|
||||
const layerService = mapStore.services().layer
|
||||
@ -38,22 +40,22 @@ export const useMapBase = (mapStore) => {
|
||||
// 处理启动加载的图层
|
||||
const collectBootLoadLayers = (nodes, layers = [], parent = null) => {
|
||||
nodes.forEach(node => {
|
||||
if (node.Attribute?.servicePath && node.Attribute.bootLoad === 1) {
|
||||
// 确保 bootLoad 图层包含正确的 parentSortIndex
|
||||
const layerWithParentSort = {
|
||||
...node,
|
||||
parentSortIndex: parent?.Attribute?.sortValue
|
||||
};
|
||||
layers.push(layerWithParentSort);
|
||||
}
|
||||
if (node.Children) {
|
||||
collectBootLoadLayers(node.Children, layers, node);
|
||||
}
|
||||
if (node.Attribute?.servicePath && node.Attribute.bootLoad === 1) {
|
||||
// 确保 bootLoad 图层包含正确的 parentSortIndex
|
||||
const layerWithParentSort = {
|
||||
...node,
|
||||
parentSortIndex: parent?.Attribute?.sortValue
|
||||
};
|
||||
layers.push(layerWithParentSort);
|
||||
}
|
||||
if (node.Children) {
|
||||
collectBootLoadLayers(node.Children, layers, node);
|
||||
}
|
||||
});
|
||||
return layers;
|
||||
};
|
||||
};
|
||||
|
||||
// 加载业务地图，业务地图主要是高亮当前业务下的地区的区县，边界都会有高亮线条
|
||||
// 加载业务地图，业务地图主要是高亮当前业务下的地区的区县与管线图，边界都会有高亮线条
|
||||
const loadBusinessMap = async () => {
|
||||
const layerService = mapStore.services().layer
|
||||
const res = await getBusinessMap()
|
||||
@ -75,6 +77,34 @@ export const useMapBase = (mapStore) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 加载高海拔底图
|
||||
const toggleHighAltitudeRoadMap = async (flag) => {
|
||||
const layerService = mapStore.services().layer
|
||||
|
||||
if(!flag && hightAltitudeRoadMapId) {
|
||||
layerService.removeLayer(hightAltitudeRoadMapId)
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
const res = await getHighAltitudeRoadMap()
|
||||
const resData = res.data
|
||||
resData[0].Children = resData
|
||||
mapStore.baseMapGroups = resData
|
||||
for (const item of resData) {
|
||||
const layers = mapStore.getBaseMapLayersForGroup(item.Attribute?.rid || item.Rid)
|
||||
for (const layerConfig of layers) {
|
||||
const layer = {
|
||||
id: layerConfig.id,
|
||||
type: layerConfig.type,
|
||||
url: layerConfig.url,
|
||||
meta: layerConfig.meta,
|
||||
}
|
||||
hightAltitudeRoadMapId = await layerService.addLayer(layer)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const loadBaseData = () => {
|
||||
setTimeout(() => {
|
||||
loadBaseMap()
|
||||
@ -83,6 +113,7 @@ export const useMapBase = (mapStore) => {
|
||||
}
|
||||
|
||||
return {
|
||||
loadBaseData
|
||||
loadBaseData,
|
||||
toggleHighAltitudeRoadMap
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,18 @@
|
||||
import { fetchEmergencyForceList } from '@/views/cockpit/api/emergencyForce'
|
||||
import { getAllYHZList } from '@/views/cockpit/api/commonHttp'
|
||||
|
||||
import ImageMarkData from './ImageMarkData'
|
||||
import * as Cesium from 'cesium'
|
||||
import * as turf from '@turf/turf'
|
||||
|
||||
|
||||
import serviceFacilityMarkerIcon from '../assets/legendTool/服务设施icon定位.png'
|
||||
import riskRoadMarkerIcon from '../assets/legendTool/风险路段icon定位.png'
|
||||
import blockEventMarkerIcon from '../assets/legendTool/阻断事件icon定位.png'
|
||||
import emergencyForceMarkerIcon from '../assets/legendTool/应急力量icon定位.png'
|
||||
import weatherAlertMarkerIcon from '../assets/legendTool/气象预警icon定位.png'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
|
||||
/**
|
||||
* 当前业务下的地图服务
|
||||
@ -15,16 +26,41 @@ export const useMapImageMark = (mapStore) => {
|
||||
|
||||
// 接口服务映射
|
||||
const imageMarkMap = {
|
||||
// 养护站 legend
|
||||
serviceFacility: new ImageMarkData({
|
||||
api: fetchEmergencyForceList,
|
||||
}),
|
||||
riskRoad: new ImageMarkData({
|
||||
api: fetchEmergencyForceList,
|
||||
key: 'serviceFacility',
|
||||
api: getAllYHZList,
|
||||
markerIcon: serviceFacilityMarkerIcon,
|
||||
onResponse: function (res) {
|
||||
if (res?.success) {
|
||||
res.data = res.data.filter((item) => {
|
||||
if (isNaN(item.jd) || isNaN(item.wd)) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
const dataList = res.data.map((item) => {
|
||||
item.mapData = {
|
||||
id: this.key + '-' + item.id,
|
||||
layerId: this.key,
|
||||
position: [Number(item.jd), Number(item.wd), 0],
|
||||
image: this.markerIcon
|
||||
}
|
||||
return item
|
||||
})
|
||||
return dataList
|
||||
}
|
||||
return []
|
||||
}
|
||||
}),
|
||||
blockEvent: new ImageMarkData({
|
||||
key: 'blockEvent',
|
||||
markerIcon: blockEventMarkerIcon,
|
||||
api: fetchEmergencyForceList,
|
||||
}),
|
||||
weatherAlert: new ImageMarkData({
|
||||
key: 'weatherAlert',
|
||||
markerIcon: weatherAlertMarkerIcon,
|
||||
api: fetchEmergencyForceList,
|
||||
})
|
||||
}
|
||||
@ -59,10 +95,10 @@ export const useMapImageMark = (mapStore) => {
|
||||
// 帧渲染函数，也就是显示器的每一帧都会执行
|
||||
// 地图拖动与放大的监控，需要更新各个tooltips的位置, 通过消息来通知
|
||||
viewer.scene.postRender.addEventListener(() => {
|
||||
for(const key in imageMarkMap) {
|
||||
for (const key in imageMarkMap) {
|
||||
const imageMarkData = imageMarkMap[key]
|
||||
const entity = imageMarkData.tooltip.entity
|
||||
if(!entity) continue
|
||||
if (!entity) continue
|
||||
imageMarkData.tooltip.updatePosition(getScreenPosition(entity))
|
||||
}
|
||||
})
|
||||
@ -99,23 +135,45 @@ export const useMapImageMark = (mapStore) => {
|
||||
imageMarkData.tooltip.close()
|
||||
}
|
||||
|
||||
/**
|
||||
* 聚焦到图片实例的中心点
|
||||
*/
|
||||
const focusOnMarkers = (dataList) => {
|
||||
if (!dataList || dataList.length === 0) return
|
||||
const positions = dataList.map((item) => {
|
||||
return [item.mapData.position[0], item.mapData.position[1]]
|
||||
})
|
||||
const features = turf.points(positions)
|
||||
const center = turf.center(features)
|
||||
const position = center.geometry.coordinates
|
||||
mapStore.viewer.camera.setView({
|
||||
destination: Cesium.Cartesian3.fromDegrees(position[0], position[1], 160000),
|
||||
orientation: {
|
||||
heading: Cesium.Math.toRadians(0), // 方向角
|
||||
pitch: Cesium.Math.toRadians(-90), // 俯仰角（-90 为垂直向下看）
|
||||
roll: 0 // 翻滚角
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 根据图标名称请求后台服务，动态加载图标列表
|
||||
*/
|
||||
const loadDynamicMark = async ({ key, markerIcon, params }) => {
|
||||
const loadDynamicMark = async ({ key, params }) => {
|
||||
const imageMarkData = imageMarkMap[key]
|
||||
if (!imageMarkData) return
|
||||
imageMarkData.markerIcon = markerIcon
|
||||
imageMarkData.key = key
|
||||
// 取消上一次请求
|
||||
imageMarkData.cancelRequest()
|
||||
const dataList = await imageMarkData.request(params)
|
||||
|
||||
clearLayerEntity(key)
|
||||
drawImageEntities(dataList)
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示/隐藏地图标
|
||||
*/
|
||||
const toggleMark = async ({ key, active, markerIcon, params }) => {
|
||||
const toggleMark = async ({ key, active, params }) => {
|
||||
const imageMarkData = imageMarkMap[key]
|
||||
|
||||
if (!active) {
|
||||
@ -124,7 +182,31 @@ export const useMapImageMark = (mapStore) => {
|
||||
return
|
||||
}
|
||||
|
||||
loadDynamicMark({ key, markerIcon, params })
|
||||
loadDynamicMark({ key, params })
|
||||
}
|
||||
|
||||
/**
|
||||
* 过滤养护站图标
|
||||
*/
|
||||
const filterYHZMark = async (key, filterFn, focusFn) => {
|
||||
const imageMarkData = imageMarkMap[key]
|
||||
if (!imageMarkData) return
|
||||
// 取消上一次请求
|
||||
imageMarkData.cancelRequest()
|
||||
let dataList = await imageMarkData.request()
|
||||
dataList = dataList.filter((item) => {
|
||||
return filterFn(item)
|
||||
})
|
||||
clearLayerEntity(key)
|
||||
// 绘制过滤出来的点
|
||||
drawImageEntities(dataList)
|
||||
// 聚焦聚焦函数过滤出来的点
|
||||
const focusDataList = dataList.filter((item)=>{
|
||||
return focusFn(item)
|
||||
})
|
||||
if(focusDataList) {
|
||||
focusOnMarkers(focusDataList)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -171,7 +253,8 @@ export const useMapImageMark = (mapStore) => {
|
||||
}
|
||||
|
||||
return {
|
||||
toggleMark
|
||||
toggleMark,
|
||||
filterYHZMark
|
||||
}
|
||||
|
||||
}
|
||||
24
packages/shared/utils/aMap.js
Normal file
24
packages/shared/utils/aMap.js
Normal file
@ -0,0 +1,24 @@
|
||||
export function loadAMap() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (window.AMap) return resolve();
|
||||
|
||||
// 确保AMapLoader存在
|
||||
if (!window.AMapLoader) {
|
||||
return reject(new Error("AMapLoader未正确加载"));
|
||||
}
|
||||
|
||||
window.AMapLoader.load({
|
||||
key: "848ab05db2a57a7782c153119f50dcef",
|
||||
version: "2.0",
|
||||
})
|
||||
.then((AMap) => {
|
||||
window.AMap = AMap;
|
||||
console.log("AMap初始化完成", AMap);
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("AMap加载失败:", err);
|
||||
reject(new Error("地图加载失败，请检查网络连接"));
|
||||
});
|
||||
});
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user