701 lines
17 KiB
Vue
701 lines
17 KiB
Vue
<!-- gis地图右侧侧边栏icon文件 -->
|
||
<script setup lang="ts">
|
||
// 引入单击Icon对应方法集合
|
||
import type { MapControlItem } from '@/gis/ol/interface/common';
|
||
import { log } from 'echarts/types/src/util/log.js';
|
||
// import { obtainScreen2D } from '@/gis/ol/screenMap';
|
||
import { addImageLabelEntity, controlEntityVisibilityByType, gisDpEvent, obtainViewer, set2DModelOr3DModel, updateViewOnZoom } from '@/gis/cesium/map';
|
||
import { getAlarmRecords, getAllAccelerator, getAllNuclearfacility, getAllNuclearFuelFacilitiy, getAllNuclearTestPlant, getAllResearchReactors, getDataProvisionEfficiency, getGlobalSiteInfo } from '@/utils/axios/gisIms';
|
||
|
||
// 图标基础集合
|
||
const baseList = ref<MapControlItem[]>([
|
||
{
|
||
name: 'ts3D',
|
||
isMargin: false,
|
||
tooltip: '二三维切换',
|
||
isActive: false,
|
||
activeName: '2D',
|
||
},
|
||
{
|
||
name: 'fullScreen',
|
||
isMargin: true,
|
||
tooltip: '全屏',
|
||
isActive: false,
|
||
activeName: 'fullScreen_active',
|
||
},
|
||
{
|
||
name: 'pointData',
|
||
isMargin: false,
|
||
tooltip: '数据选择',
|
||
isActive: false,
|
||
activeName: 'pointData_active',
|
||
},
|
||
|
||
{
|
||
name: 'zoomIn',
|
||
isMargin: false,
|
||
tooltip: '放大',
|
||
isActive: false,
|
||
activeName: 'zoomIn',
|
||
},
|
||
{
|
||
name: 'zoomOut',
|
||
isMargin: true,
|
||
tooltip: '缩小',
|
||
isActive: false,
|
||
activeName: 'zoomOut',
|
||
},
|
||
|
||
]);
|
||
const globalDaTaInffalg: any = ref(false);
|
||
const globalDaTaInftitle: any = ref('信息');
|
||
const globalDaTaInfContent: any = ref({});
|
||
const globalDaTaInfContentArr: any = ref([]);
|
||
|
||
// //站点类型（1-台站、2-核设施、3-反应堆、4-后处理厂、5-核试验场、6-加速器）
|
||
const podataMenu: any = [{
|
||
url: '/cesium/image/taizhan.svg',
|
||
name: '台站',
|
||
type: 1,
|
||
active: false,
|
||
content: [{
|
||
key: 'stationCode',
|
||
value: '台站编码',
|
||
}, {
|
||
key: 'id',
|
||
value: '台站ID',
|
||
}, {
|
||
key: 'countryCode',
|
||
value: '国家',
|
||
}, {
|
||
key: 'type',
|
||
value: '台站类型',
|
||
}, {
|
||
key: 'lon',
|
||
value: '经度',
|
||
}, {
|
||
key: 'lat',
|
||
value: '纬度',
|
||
}, {
|
||
key: 'elevation',
|
||
value: '海拔',
|
||
}, {
|
||
key: 'dateBegin',
|
||
value: '开始运行日期',
|
||
}, {
|
||
key: 'dateEnd',
|
||
value: '结束运行日期',
|
||
}, {
|
||
key: 'description',
|
||
value: '说明',
|
||
}, {
|
||
key: 'status',
|
||
value: '状态',
|
||
}, {
|
||
key: 'phdf',
|
||
value: '全谱',
|
||
}, {
|
||
key: 'phd',
|
||
value: '样品谱',
|
||
}, {
|
||
key: 'met',
|
||
value: '气象谱',
|
||
}, {
|
||
key: 'soh',
|
||
value: '健康状态谱',
|
||
}, {
|
||
key: 'phdMetSoh',
|
||
value: '样品谱+气象谱+健康状态谱',
|
||
}],
|
||
}, {
|
||
url: '/cesium/image/hesheshi.png',
|
||
name: '核设施',
|
||
type: 2,
|
||
active: false,
|
||
content: [{
|
||
key: 'unitName',
|
||
value: '设施名称',
|
||
}, {
|
||
key: 'id',
|
||
value: '设施ID',
|
||
}, {
|
||
key: 'country',
|
||
value: '国家',
|
||
}, {
|
||
key: 'longitude',
|
||
value: '经度',
|
||
}, {
|
||
key: 'latitude',
|
||
value: '纬度',
|
||
}, {
|
||
key: 'reactorStatus',
|
||
value: '状态',
|
||
}, {
|
||
key: 'reactorType',
|
||
value: '类型',
|
||
}, {
|
||
key: 'model',
|
||
value: '型号',
|
||
}, {
|
||
key: 'owner',
|
||
value: '所有者',
|
||
}, {
|
||
key: 'operator',
|
||
value: '运营单位',
|
||
}, {
|
||
key: 'referenceUnitPowerMwe',
|
||
value: '参考净容量',
|
||
}, {
|
||
key: 'designNetCapacityMwe',
|
||
value: '设计净容量',
|
||
}, {
|
||
key: 'grossCapacityMwe',
|
||
value: '毛容量',
|
||
}, {
|
||
key: 'thermalCapacityMwt',
|
||
value: '热功率',
|
||
}, {
|
||
key: 'constructionStartDate',
|
||
value: '施工开始日期',
|
||
}, {
|
||
key: 'firstCriticalityDate',
|
||
value: '首次临界日期',
|
||
}, {
|
||
key: 'commercialOperationDate',
|
||
value: '首次并网日期',
|
||
}, {
|
||
key: 'firstCriticalityDate',
|
||
value: '商业运行日期',
|
||
}],
|
||
}, {
|
||
url: '/cesium/image/fanyingdui.png',
|
||
name: '反应堆',
|
||
type: 3,
|
||
active: false,
|
||
content: [{
|
||
key: 'facilityName',
|
||
value: '设施名称',
|
||
}, {
|
||
key: 'id',
|
||
value: '设施ID',
|
||
}, {
|
||
key: 'longitude',
|
||
value: '经度',
|
||
}, {
|
||
key: 'latitude',
|
||
value: '纬度',
|
||
}, {
|
||
key: 'country',
|
||
value: '国家',
|
||
}, {
|
||
key: 'city',
|
||
value: '城市',
|
||
}, {
|
||
key: 'reactorType',
|
||
value: '物理类型',
|
||
}, {
|
||
key: 'thermalPower',
|
||
value: '热功率',
|
||
}, {
|
||
key: 'status',
|
||
value: '状态',
|
||
}, {
|
||
key: 'isIsotopeProduction',
|
||
value: '是否用于同位素生产',
|
||
}],
|
||
}, {
|
||
url: '/cesium/image/houchulichang.png',
|
||
name: '后处理厂',
|
||
type: 4,
|
||
active: false,
|
||
content: [{
|
||
key: 'facilityName',
|
||
value: '设施名称',
|
||
}, {
|
||
key: 'id',
|
||
value: '设施ID',
|
||
}, {
|
||
key: 'longitude',
|
||
value: '经度',
|
||
}, {
|
||
key: 'latitude',
|
||
value: '纬度',
|
||
}, {
|
||
key: 'country',
|
||
value: '国家',
|
||
}, {
|
||
key: 'facilityType',
|
||
value: '设施类型',
|
||
}, {
|
||
key: 'fuelType',
|
||
value: '燃料类型',
|
||
}, {
|
||
key: 'facilityStatus',
|
||
value: '设施状态',
|
||
}, {
|
||
key: 'scale',
|
||
value: '规模',
|
||
}, {
|
||
key: 'designCapacity',
|
||
value: '设计容量',
|
||
}, {
|
||
key: 'startOfOperation',
|
||
value: '开始运营年份',
|
||
}, {
|
||
key: 'endOfOperation',
|
||
value: '结束运营年份',
|
||
}],
|
||
}, {
|
||
url: '/cesium/image/heshiyanchang.png',
|
||
name: '核试验场',
|
||
type: 5,
|
||
active: false,
|
||
content: [{
|
||
key: 'name',
|
||
value: '地点名称',
|
||
}, {
|
||
key: 'id',
|
||
value: '记录ID',
|
||
}, {
|
||
key: 'longitude',
|
||
value: '经度',
|
||
}, {
|
||
key: 'latitude',
|
||
value: '纬度',
|
||
}, {
|
||
key: 'country',
|
||
value: '国家',
|
||
}],
|
||
}, {
|
||
url: '/cesium/image/jiasuchang.png',
|
||
name: '加速器',
|
||
type: 6,
|
||
active: false,
|
||
content: [{
|
||
key: 'facility_code',
|
||
value: '设施简称',
|
||
}, {
|
||
key: 'id',
|
||
value: '记录ID',
|
||
}, {
|
||
key: 'longitude',
|
||
value: '经度',
|
||
}, {
|
||
key: 'latitude',
|
||
value: '纬度',
|
||
}, {
|
||
key: 'country',
|
||
value: '国家',
|
||
}, {
|
||
key: 'category',
|
||
value: '设施分类',
|
||
}, {
|
||
key: 'maxCurrentA',
|
||
value: '最大电流',
|
||
}, {
|
||
key: 'maxNeutronEnergyMev',
|
||
value: '最大中子能量',
|
||
}, {
|
||
key: 'target',
|
||
value: '靶材料',
|
||
}, {
|
||
key: 'type',
|
||
value: '加速器类型',
|
||
}, {
|
||
key: 'isOperational',
|
||
value: '是否仍在运行',
|
||
}],
|
||
}, {
|
||
url: '/cesium/image/gaoj.png',
|
||
name: '告警',
|
||
type: 7,
|
||
active: false,
|
||
content: [{
|
||
key: 'taskName',
|
||
value: '任务名称',
|
||
}, {
|
||
key: 'alarmTime',
|
||
value: '报警时间',
|
||
}, {
|
||
key: 'samplingTime',
|
||
value: '采样时间',
|
||
}, {
|
||
key: 'longitude',
|
||
value: '经度',
|
||
}, {
|
||
key: 'latitude',
|
||
value: '纬度',
|
||
}, {
|
||
key: 'sourceType',
|
||
value: '数据源',
|
||
}],
|
||
}];
|
||
|
||
// 数据信息check选择
|
||
function podataMenuClick(menu: any) {
|
||
menu.active = !menu.active;
|
||
controlEntityVisibilityByType(menu.type, menu.active);
|
||
}
|
||
// 图标集合
|
||
const svgList = ref<MapControlItem[]>([...baseList.value]);
|
||
// 图标点击事件处理
|
||
function handleIconClick(item: MapControlItem) {
|
||
// const map: any = obtainScreen2D('mapscreen');
|
||
|
||
switch (item.name) {
|
||
case 'fullScreen':
|
||
if (!document.fullscreenElement) {
|
||
document.documentElement.requestFullscreen().catch((err) => {
|
||
console.error(`全屏操作失败: ${err.message}`);
|
||
});
|
||
}
|
||
else {
|
||
if (document.exitFullscreen) {
|
||
document.exitFullscreen();
|
||
}
|
||
}
|
||
break;
|
||
case 'ts3D':
|
||
set2DModelOr3DModel('mapscreen', item.isActive ? '3D' : '2D');
|
||
break;
|
||
case 'pointData':
|
||
break;
|
||
case 'zoomIn':
|
||
obtainViewer('mapscreen').then((viewer: any) => {
|
||
updateViewOnZoom(viewer, 'zoomIn');
|
||
});
|
||
break;
|
||
case 'zoomOut':
|
||
obtainViewer('mapscreen').then((viewer: any) => {
|
||
// 缩小
|
||
updateViewOnZoom(viewer, 'zoomOut');
|
||
});
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
item.isActive = !item.isActive;
|
||
}
|
||
onMounted(() => {
|
||
obtainViewer('mapscreen').then((viewer: any) => {
|
||
setTimeout(() => {
|
||
// 设置选中展示信息回调事件
|
||
gisDpEvent.checkEvent = (visit: boolean, type: number, dataInfo: any) => {
|
||
globalDaTaInffalg.value = visit;
|
||
if (visit) {
|
||
const glitInf = podataMenu[type - 1];
|
||
globalDaTaInfContent.value = dataInfo;
|
||
globalDaTaInftitle.value = glitInf.name;
|
||
globalDaTaInfContentArr.value = glitInf.content;
|
||
}
|
||
};
|
||
// 台站 1
|
||
getDataProvisionEfficiency((res: any) => {
|
||
// 索引从1开始
|
||
const itemData = podataMenu[0];
|
||
// 1. 映射为Entity配置数组（你的原有逻辑，保留）
|
||
const list = res.map((item: any) => {
|
||
return {
|
||
id: `${item.id}-${itemData.type}`,
|
||
type: itemData.type,
|
||
position: [item.lon, item.lat],
|
||
imageUrl: itemData.url,
|
||
labelText: item.unitName ?? `台站${item.id}`,
|
||
dataInf: item, // 传递完整数据
|
||
};
|
||
});
|
||
|
||
addImageLabelEntity(viewer, list);
|
||
});
|
||
// H设施 2
|
||
getAllNuclearfacility((res: any) => {
|
||
res.forEach((item: any, iIndex: number) => {
|
||
console.log(iIndex, '数据缩影');
|
||
if (!item.longitude || !item.latitude) {
|
||
console.warn(item, '数据经度、纬度属性为空');
|
||
return '';
|
||
}
|
||
// 索引从1开始
|
||
const itemData = podataMenu[1];
|
||
if (itemData) {
|
||
addImageLabelEntity(viewer, {
|
||
id: `${item.id}-${itemData.type}`,
|
||
type: itemData.type,
|
||
position: [item.longitude, item.latitude],
|
||
imageUrl: itemData.url,
|
||
labelText: item.unitName ?? `核设施${item.id}`,
|
||
dataInf: item,
|
||
});
|
||
}
|
||
else {
|
||
console.log(item);
|
||
}
|
||
});
|
||
});
|
||
// 研究型反应堆 3
|
||
getAllResearchReactors((res: any) => {
|
||
res.forEach((item: any, iIndex: number) => {
|
||
console.log(iIndex, '数据缩影');
|
||
if (!item.longitude || !item.latitude) {
|
||
console.warn(item, '数据经度、纬度属性为空');
|
||
return '';
|
||
}
|
||
// 索引从1开始
|
||
const itemData = podataMenu[2];
|
||
if (itemData) {
|
||
addImageLabelEntity(viewer, {
|
||
id: `${item.id}-${itemData.type}`,
|
||
type: itemData.type,
|
||
position: [item.longitude, item.latitude],
|
||
imageUrl: itemData.url,
|
||
labelText: item.facilityName ?? `研究型反应堆${item.id}`,
|
||
dataInf: item,
|
||
});
|
||
}
|
||
else {
|
||
console.log(item);
|
||
}
|
||
});
|
||
});
|
||
// 后处理厂 4
|
||
getAllNuclearFuelFacilitiy((res: any) => {
|
||
res.forEach((item: any, iIndex: number) => {
|
||
console.log(iIndex, '数据缩影');
|
||
if (!item.longitude || !item.latitude) {
|
||
console.warn(item, '数据经度、纬度属性为空');
|
||
return '';
|
||
}
|
||
// 索引从1开始
|
||
const itemData = podataMenu[3];
|
||
if (itemData) {
|
||
addImageLabelEntity(viewer, {
|
||
id: `${item.id}-${itemData.type}`,
|
||
type: itemData.type,
|
||
position: [item.longitude, item.latitude],
|
||
imageUrl: itemData.url,
|
||
labelText: item.facilityName ?? `后处理厂${item.id}`,
|
||
dataInf: item,
|
||
});
|
||
}
|
||
else {
|
||
console.log(item);
|
||
}
|
||
});
|
||
});
|
||
// 核试验 5
|
||
getAllNuclearTestPlant((res: any) => {
|
||
res.forEach((item: any, iIndex: number) => {
|
||
console.log(iIndex, '数据缩影');
|
||
if (!item.longitude || !item.latitude) {
|
||
console.warn(item, '数据经度、纬度属性为空');
|
||
return '';
|
||
}
|
||
// 索引从1开始
|
||
const itemData = podataMenu[4];
|
||
if (itemData) {
|
||
addImageLabelEntity(viewer, {
|
||
id: `${item.id}-${itemData.type}`,
|
||
type: itemData.type,
|
||
position: [item.longitude, item.latitude],
|
||
imageUrl: itemData.url,
|
||
labelText: item.name ?? `核试验${item.id}`,
|
||
dataInf: item,
|
||
});
|
||
}
|
||
else {
|
||
console.log(item);
|
||
}
|
||
});
|
||
});
|
||
// 加速器 6
|
||
getAllAccelerator((res: any) => {
|
||
res.forEach((item: any, iIndex: number) => {
|
||
console.log(iIndex, '数据缩影');
|
||
if (!item.longitude || !item.latitude) {
|
||
console.warn(item, '数据经度、纬度属性为空');
|
||
return '';
|
||
}
|
||
// 索引从1开始
|
||
const itemData = podataMenu[5];
|
||
if (itemData) {
|
||
addImageLabelEntity(viewer, {
|
||
id: `${item.id}-${itemData.type}`,
|
||
type: itemData.type,
|
||
position: [item.longitude, item.latitude],
|
||
imageUrl: itemData.url,
|
||
labelText: item.facilityName ?? `加速器${item.id}`,
|
||
dataInf: item,
|
||
});
|
||
}
|
||
else {
|
||
console.log(item);
|
||
}
|
||
});
|
||
});
|
||
// 海洋报警 7
|
||
getAlarmRecords((res: any) => {
|
||
res.forEach((item: any, iIndex: number) => {
|
||
console.log(iIndex, '数据缩影');
|
||
if (!item.longitude || !item.latitude) {
|
||
console.warn(item, '数据经度、纬度属性为空');
|
||
return '';
|
||
}
|
||
// 索引从1开始
|
||
const itemData = podataMenu[6];
|
||
if (itemData) {
|
||
addImageLabelEntity(viewer, {
|
||
id: `${item.id}-${itemData.type}`,
|
||
type: itemData.type,
|
||
position: [item.longitude, item.latitude],
|
||
imageUrl: itemData.url,
|
||
labelText: item.taskName ?? `海洋报警${item.id}`,
|
||
dataInf: item,
|
||
});
|
||
}
|
||
else {
|
||
console.log(item);
|
||
}
|
||
});
|
||
});
|
||
}, 5000);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="icon_container">
|
||
<div v-for="(item, index) in svgList" :key="index" class="icon"
|
||
:class="{ 'has-margin': item.isMargin, 'has-active': item.isActive }" @click.stop="handleIconClick(item)">
|
||
<el-tooltip v-if="item.name !== 'pointData'" class="box-item" effect="dark" :content="item.tooltip"
|
||
placement="left">
|
||
<SvgIcon :name="item.isActive ? item.activeName : item.name" width="20" height="20" />
|
||
</el-tooltip>
|
||
<el-popover v-else title="设施类型" content="Left Center prompts info" placement="left" trigger="click"
|
||
popper-class="right_M_Popover">
|
||
<template #reference>
|
||
<SvgIcon :name="item.isActive ? item.activeName : item.name" width="20" height="20" />
|
||
</template>
|
||
<div class="right_M">
|
||
<div v-for="(v, i) in podataMenu" :key="i" class="right_MItem">
|
||
<el-image style="width: 20px; height: 20px" :src="v.url" />
|
||
<span class="right_Mtitle"> {{ v.name }}</span>
|
||
<el-checkbox :checked="v.active" @change="podataMenuClick(v)" />
|
||
</div>
|
||
</div>
|
||
</el-popover>
|
||
</div>
|
||
<div v-show="globalDaTaInffalg" class="info-gloal_gis">
|
||
<div class="info-gloal_gis-header">
|
||
{{ globalDaTaInftitle }}
|
||
</div>
|
||
<div v-for="(glDptItem, glDptItemI) in globalDaTaInfContentArr" :key="glDptItemI" class="info-gloal_gis-item">
|
||
<div class="title">
|
||
{{ glDptItem.value }}
|
||
</div>
|
||
<div>
|
||
{{ globalDaTaInfContent[glDptItem.key] ?? "--" }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.icon_container {
|
||
width: 32px;
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 10vh;
|
||
z-index: 300;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.icon {
|
||
width: 30px;
|
||
height: 30px;
|
||
background-color: #021a1d;
|
||
border: solid 1px #0a544e;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover {
|
||
background-color: #0a544e;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
&.has-margin {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
&.has-active {
|
||
background-color: #14a4b8;
|
||
border: solid 1px #0a544e;
|
||
}
|
||
|
||
&.disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
|
||
&:hover {
|
||
background-color: #021a1d;
|
||
transform: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-gloal_gis {
|
||
position: absolute;
|
||
right: 50px;
|
||
top: -30px;
|
||
width: auto;
|
||
height: auto;
|
||
color: #fff;
|
||
text-align: center;
|
||
justify-items: center;
|
||
background-color: rgba(2, 26, 29, 0.9);
|
||
padding: 10px 2px;
|
||
border-radius: 5px;
|
||
|
||
.info-gloal_gis-header {
|
||
padding: 10px 0 20px 0;
|
||
color: rgb(178, 135, 18);
|
||
}
|
||
|
||
.info-gloal_gis-item {
|
||
width: 400px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
padding: 0 5px;
|
||
|
||
.title {
|
||
color: #6ebad0;
|
||
}
|
||
|
||
div {
|
||
border: 1px solid #0a544e;
|
||
width: 50%;
|
||
padding: 10px;
|
||
text-align: center;
|
||
justify-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.el-popover) {
|
||
.el-popover__title {
|
||
color: aliceblue;
|
||
}
|
||
|
||
.el-popper.is-light,
|
||
.el-popper.is-light>.el-popper__arrow:before {
|
||
background: #021a1d !important;
|
||
border: 1px solid #021a1d !important;
|
||
}
|
||
}
|
||
</style>
|