jjx
/
g-cesium-map
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update

feature
jiangAB 1 week ago
parent
4ca9409216
commit
88fa1ce11a
5 changed files with 265 additions and 192 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      public/map/components/ShorePowerUsage.vue
  2. 19
      public/map/components/ShorePowerUsageSingleData.vue
  3. 14
      public/map/components/ShowData.vue
  4. 298
      public/map/components/cesiumMap.vue
  5. 107
      public/map/index.vue

19
public/map/components/ShorePowerUsage.vue
View File

@ -285,6 +285,9 @@ interface Props {
handleGoBack: () => void; handleGoBack: () => void;
realtimeDeviceDataTime: string; realtimeDeviceDataTime: string;
initialTimeRange?: string; initialTimeRange?: string;
yearData: RealtimeDeviceData[];
monthData: RealtimeDeviceData[];
dayData: RealtimeDeviceData[];
} }
const props = defineProps<Props>() const props = defineProps<Props>()
@ -893,7 +896,7 @@ const handleGetRealTimeAllData = async (realtimeDeviceData: RealtimeDeviceData[]
// year: new Date().getFullYear() // year: new Date().getFullYear()
} }
if (!params.ids) return; if (!params.ids) return;
let yearDataRes: RealtimeDeviceData[] = [] /* let yearDataRes: RealtimeDeviceData[] = []
let weekDataRes: RealtimeDeviceData[] = [] let weekDataRes: RealtimeDeviceData[] = []
let monthDataRes: RealtimeDeviceData[] = [] let monthDataRes: RealtimeDeviceData[] = []
let dayDataRes: RealtimeDeviceData[] = [] let dayDataRes: RealtimeDeviceData[] = []
@ -905,16 +908,16 @@ const handleGetRealTimeAllData = async (realtimeDeviceData: RealtimeDeviceData[]
dayDataRes = await MapApi.getDayDataByIdList(params); dayDataRes = await MapApi.getDayDataByIdList(params);
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} } */
// const quarterDataRes: deviceData = await MapApi.getQuarterDataByIdList(params); // const quarterDataRes: deviceData = await MapApi.getQuarterDataByIdList(params);
const realTimeSum = res.reduce((acc, item) => acc + item.measureValue, 0); const realTimeSum = res.reduce((acc, item) => acc + item.measureValue, 0);
const daySum = realTimeSum - Object.values(dayDataRes).reduce((acc, item) => acc + item.measureValue, 0); const daySum = realTimeSum - Object.values(props.dayData).reduce((acc, item) => acc + item.measureValue, 0);
const weekSum = realTimeSum - Object.values(weekDataRes).reduce((acc, item) => acc + item.measureValue, 0); // const weekSum = realTimeSum - Object.values(weekDataRes).reduce((acc, item) => acc + item.measureValue, 0);
const monthSum = realTimeSum - Object.values(monthDataRes).reduce((acc, item) => acc + item.measureValue, 0); const monthSum = realTimeSum - Object.values(props.monthData).reduce((acc, item) => acc + item.measureValue, 0);
// const quarterSum = Object.values(quarterDataRes).reduce((acc, item) => acc + item.measureValue, 0); // const quarterSum = Object.values(quarterDataRes).reduce((acc, item) => acc + item.measureValue, 0);
const yearSum = realTimeSum - Object.values(yearDataRes).reduce((acc, item) => acc + item.measureValue, 0); const yearSum = realTimeSum - Object.values(props.yearData).reduce((acc, item) => acc + item.measureValue, 0);
// totalPower.value = realTimeSum.toFixed(2) // totalPower.value = realTimeSum.toFixed(2)
// co2Reduction.value = (realTimeSum * 670 / 1000000).toFixed(2) // 克转化为吨 // co2Reduction.value = (realTimeSum * 670 / 1000000).toFixed(2) // 克转化为吨
@ -943,14 +946,14 @@ const handleGetRealTimeAllData = async (realtimeDeviceData: RealtimeDeviceData[]
nox: Number((daySum * 18.1 / 1000).toFixed(2)), // 克转化为千克 nox: Number((daySum * 18.1 / 1000).toFixed(2)), // 克转化为千克
so2: Number((daySum * 10.5 / 1000).toFixed(2)), // 克转化为千克 so2: Number((daySum * 10.5 / 1000).toFixed(2)), // 克转化为千克
} }
chartData.value.week = { /* chartData.value.week = {
totalPower: Number(weekSum.toFixed(2)), totalPower: Number(weekSum.toFixed(2)),
fuel: Number((weekSum * 0.22 / 1).toFixed(2)), // 转化为吨 fuel: Number((weekSum * 0.22 / 1).toFixed(2)), // 转化为吨
co2: Number((weekSum * 670 / 1000).toFixed(2)), // 克转化为千克 co2: Number((weekSum * 670 / 1000).toFixed(2)), // 克转化为千克
pm25: Number((weekSum * 1.46 / 1000).toFixed(2)), // 克转化为千克 pm25: Number((weekSum * 1.46 / 1000).toFixed(2)), // 克转化为千克
nox: Number((weekSum * 18.1 / 1000).toFixed(2)), // 克转化为千克 nox: Number((weekSum * 18.1 / 1000).toFixed(2)), // 克转化为千克
so2: Number((weekSum * 10.5 / 1000).toFixed(2)), // 克转化为千克 so2: Number((weekSum * 10.5 / 1000).toFixed(2)), // 克转化为千克
} } */
chartData.value.month = { chartData.value.month = {
totalPower: Number(monthSum.toFixed(2)), totalPower: Number(monthSum.toFixed(2)),
fuel: Number((monthSum * 0.22 / 1).toFixed(2)), // 转化为吨 fuel: Number((monthSum * 0.22 / 1).toFixed(2)), // 转化为吨

19
public/map/components/ShorePowerUsageSingleData.vue
View File

@ -291,6 +291,9 @@ interface Props {
realtimeDeviceDataTime: string; realtimeDeviceDataTime: string;
comparativeData: ComparativeData; comparativeData: ComparativeData;
initialTimeRange?: 'realtime' | 'day' | 'month' | 'year'; initialTimeRange?: 'realtime' | 'day' | 'month' | 'year';
yearData: RealtimeDeviceData[];
monthData: RealtimeDeviceData[];
dayData: RealtimeDeviceData[];
} }
@ -917,7 +920,7 @@ const handleGetRealTimeAllData = async (realtimeDeviceData: RealtimeDeviceData[]
// year: new Date().getFullYear() // year: new Date().getFullYear()
} }
if (!params.ids) return; if (!params.ids) return;
let yearDataRes: RealtimeDeviceData[] = [] /* let yearDataRes: RealtimeDeviceData[] = []
let weekDataRes: RealtimeDeviceData[] = [] let weekDataRes: RealtimeDeviceData[] = []
let monthDataRes: RealtimeDeviceData[] = [] let monthDataRes: RealtimeDeviceData[] = []
let dayDataRes: RealtimeDeviceData[] = [] let dayDataRes: RealtimeDeviceData[] = []
@ -929,16 +932,16 @@ const handleGetRealTimeAllData = async (realtimeDeviceData: RealtimeDeviceData[]
dayDataRes = await MapApi.getDayDataByIdList(params); dayDataRes = await MapApi.getDayDataByIdList(params);
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} } */
// const quarterDataRes: deviceData = await MapApi.getQuarterDataByIdList(params); // const quarterDataRes: deviceData = await MapApi.getQuarterDataByIdList(params);
const realTimeSum = res.reduce((acc, item) => acc + item.measureValue, 0); const realTimeSum = res.reduce((acc, item) => acc + item.measureValue, 0);
const daySum = realTimeSum - Object.values(dayDataRes).reduce((acc, item) => acc + item.measureValue, 0); const daySum = realTimeSum - Object.values(props.dayData).reduce((acc, item) => acc + item.measureValue, 0);
const weekSum = realTimeSum - Object.values(weekDataRes).reduce((acc, item) => acc + item.measureValue, 0); // const weekSum = realTimeSum - Object.values(weekDataRes).reduce((acc, item) => acc + item.measureValue, 0);
const monthSum = realTimeSum - Object.values(monthDataRes).reduce((acc, item) => acc + item.measureValue, 0); const monthSum = realTimeSum - Object.values(props.monthData).reduce((acc, item) => acc + item.measureValue, 0);
// const quarterSum = Object.values(quarterDataRes).reduce((acc, item) => acc + item.measureValue, 0); // const quarterSum = Object.values(quarterDataRes).reduce((acc, item) => acc + item.measureValue, 0);
const yearSum = realTimeSum - Object.values(yearDataRes).reduce((acc, item) => acc + item.measureValue, 0); const yearSum = realTimeSum - Object.values(props.yearData).reduce((acc, item) => acc + item.measureValue, 0);
// totalPower.value = realTimeSum.toFixed(2) // totalPower.value = realTimeSum.toFixed(2)
// co2Reduction.value = (realTimeSum * 670 / 1000000).toFixed(2) // 克转化为吨 // co2Reduction.value = (realTimeSum * 670 / 1000000).toFixed(2) // 克转化为吨
@ -967,14 +970,14 @@ const handleGetRealTimeAllData = async (realtimeDeviceData: RealtimeDeviceData[]
nox: convertPowerUsage(daySum, 'nox'), nox: convertPowerUsage(daySum, 'nox'),
so2: convertPowerUsage(daySum, 'so2'), so2: convertPowerUsage(daySum, 'so2'),
} }
chartData.value.week = { /* chartData.value.week = {
totalPower: convertPowerUsage(weekSum, 'totalPower'), totalPower: convertPowerUsage(weekSum, 'totalPower'),
fuel: convertPowerUsage(weekSum, 'fuel'), fuel: convertPowerUsage(weekSum, 'fuel'),
co2: convertPowerUsage(weekSum, 'co2'), co2: convertPowerUsage(weekSum, 'co2'),
pm25: convertPowerUsage(weekSum, 'pm25'), pm25: convertPowerUsage(weekSum, 'pm25'),
nox: convertPowerUsage(weekSum, 'nox'), nox: convertPowerUsage(weekSum, 'nox'),
so2: convertPowerUsage(weekSum, 'so2'), so2: convertPowerUsage(weekSum, 'so2'),
} } */
chartData.value.month = { chartData.value.month = {
totalPower: convertPowerUsage(monthSum, 'totalPower'), totalPower: convertPowerUsage(monthSum, 'totalPower'),
fuel: convertPowerUsage(monthSum, 'fuel'), fuel: convertPowerUsage(monthSum, 'fuel'),

14
public/map/components/ShowData.vue
View File

@ -254,16 +254,6 @@
</div> </div>
<div class="enterprise-usage"> <div class="enterprise-usage">
<div class="usage-bars"> <div class="usage-bars">
<!-- <div class="bar-item" v-for="item in companyShorePowerBuildData[enterpriseActivePeriod]"
:key="item.harborDistrictId">
<div class="bar-header">
<span class="bar-name">{{ item.name }}</span>
<span class="bar-value">{{ item.totalPower.toFixed(2) }} kWH</span>
</div>
<el-progress
:percentage="calculatePercentageForCompany(item, companyShorePowerData)"
:show-text="false" :stroke-width="10" />
</div> -->
<div class="bar-item" v-for="item in companyShorePowerData" :key="item.id"> <div class="bar-item" v-for="item in companyShorePowerData" :key="item.id">
<div class="bar-header"> <div class="bar-header">
<span class="bar-name">{{ item.name }}</span> <span class="bar-name">{{ item.name }}</span>
@ -390,7 +380,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { CompanyShorePowerBuildDataItem, CompanyShorePowerData, RealtimeDeviceData, ShipRespVo, TimeRange } from '@/types/shorepower'; import { CompanyShorePowerData, RealtimeDeviceData, ShipRespVo, TimeRange } from '@/types/shorepower';
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import { MapApi } from "@/api/shorepower/map"; import { MapApi } from "@/api/shorepower/map";
import ShipHistoryDialog from './ShipHistoryDialog.vue' import ShipHistoryDialog from './ShipHistoryDialog.vue'
@ -401,8 +391,6 @@ interface Props {
handleGoToModule: (moduleType: number, timeRange?: string) => void handleGoToModule: (moduleType: number, timeRange?: string) => void
realtimeDeviceDataTime: string realtimeDeviceDataTime: string
realtimeDeviceData: RealtimeDeviceData[] realtimeDeviceData: RealtimeDeviceData[]
companyShorePowerBuildData: CompanyShorePowerBuildDataItem[]
allPortAreaCount: number
chartData: { chartData: {
[key in 'day' | 'month' | 'year' | 'realtime']: { [key in 'day' | 'month' | 'year' | 'realtime']: {
'totalPower': number, 'totalPower': number,

298
public/map/components/cesiumMap.vue
View File

@ -50,6 +50,19 @@ const props = defineProps({
); );
} }
}, },
distributionDataList: {
type: Array,
required: true,
// 可选：添加自定义 validator（更严格）
validator(value) {
return Array.isArray(value) && value.every(item =>
typeof item === 'object' &&
item !== null &&
typeof item.position === 'string'
// 注意：无法验证是否符合 ShorePowerBerth 结构（因为 JS 没有接口）
);
}
},
onInstanceClick: { onInstanceClick: {
type: Function, type: Function,
default: (data) => { } default: (data) => { }
@ -315,19 +328,10 @@ onMounted(async () => {
maximumLevel: 16 maximumLevel: 16
}); });
const dataInfo = history.value ? history.value : await MapApi.getAllData() const dataInfo = history.value ? history.value : await MapApi.getAllData()
console.log(dataInfo)
const shipData = props.shipDataList const shipData = props.shipDataList
const shorePowerList = props.shorePowerList const shorePowerList = props.shorePowerList
const distributionDataList = props.distributionDataList
// const unitedData =
// 通用添加函数，遍历dataInfo并创建标记
let arr = {
arr1: [],
arr2: [],
arr3: [],
arr4: [],
arr5: []
}
// 步骤 3: 将图层添加到 Viewer 中 // 步骤 3: 将图层添加到 Viewer 中
viewer.imageryLayers.addImageryProvider(gaodeImage); viewer.imageryLayers.addImageryProvider(gaodeImage);
@ -343,10 +347,107 @@ onMounted(async () => {
const oneTitleInstance = [] const oneTitleInstance = []
const twoTitleInstance = [] const twoTitleInstance = []
const tempShorePowerInstance = [] const tempShorePowerInstance = []
const tempDistributionBoxInstance = []
const ShorePowerAndShipInstance = [] const ShorePowerAndShipInstance = []
const distributionBoxAndShorePowerInstance = []
distributionDataList.forEach((item) => {
const itemDistribution = dataInfo.filter(mapitem => (item.id === mapitem.parentId) && mapitem.type === 3)
const result = itemDistribution
.filter(item => {
try {
const data = JSON.parse(item.data);
return data.type === 'icon';
} catch (e) {
return false; // 忽略无法解析的 data
}
})
.map(item => JSON.parse(item.data));
console.log(result)
if (!result || result.length === 0) return
const dataObj = result[0]
let longitude, latitude;
let wgsLon, wgsLat;
const wgsCoords = coordtransform.gcj02towgs84(dataObj.xy[1], dataObj.xy[0]);
wgsLon = wgsCoords[0];
wgsLat = wgsCoords[1];
latitude = wgsLat;
longitude = wgsLon;
const xposition = Cesium.Cartesian3.fromDegrees(longitude, latitude, 1);
console.log(xposition)
const xelectricalBoxModel = viewer.entities.add({
name: '配电箱',
position: xposition,
// 添加唯一标识用于识别点击事件
properties: {
modelType: 'distribution_box',
data: item
},
orientation: Cesium.Transforms.headingPitchRollQuaternion(
xposition,
new Cesium.HeadingPitchRoll(
Cesium.Math.toRadians(dataObj.rotationAngle), // 航向角 (绕Z轴旋转)
Cesium.Math.toRadians(0), // 俯仰角 (绕Y轴旋转)
Cesium.Math.toRadians(0) // 翻滚角 (绕X轴旋转)
)
),
model: {
uri: '/model/electrical_box.glb',
scale: 2,
enableDepthTest: true,
backFaceCulling: true
},
});
tempDistributionBoxInstance.push({ distributionId: item.id, distributionBoxModel: xelectricalBoxModel })
modelInstance.push({
model: xelectricalBoxModel,
type: 'shorepower_box',
data: item
})
const MODEL_HEIGHT_METERS = 80;
const cartographic = Cesium.Cartographic.fromCartesian(xposition);
const labelAltitude = cartographic.height + MODEL_HEIGHT_METERS;
const labelPosition = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
labelAltitude
);
const xelectricalBoxLabel = viewer.entities.add({
// 使用 3D 空间计算出的新位置
position: labelPosition,
properties: {
modelType: 'shorepower_box',
data: item
},
name: '岸电箱 Label',
label: {
text: item.name ? item.name.replace(/(.*)#(.*)/g, '$1#\n$2') : '',
font: '24px sans-serif',
fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
// *** 关键设置 1：禁用深度测试，确保标签显示在模型上方 ***
// 确保它不会被模型或地球遮挡。
disableDepthTest: true,
// 关键设置 2：移除 pixelOffset（因为我们使用了 3D 位置偏移）
// pixelOffset: new Cesium.Cartesian2(0, 0),
// 关键设置 3：控制文字大小随距离缩放 (实现“真实大小”效果)
// 使用 near/far scalar 控制，避免缩放地图时文字过大
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 50000, 0.1)
// ⚠️ 请根据您的场景调整这四个参数
}
});
})
console.log(distributionDataList)
shorePowerList.forEach((item) => { shorePowerList.forEach((item) => {
console.log(item.id)
const itemShipInfo = dataInfo.filter(mapitem => (item.id === mapitem.parentId) && mapitem.type === 5) const itemShipInfo = dataInfo.filter(mapitem => (item.id === mapitem.parentId) && mapitem.type === 5)
console.log(item)
const result = itemShipInfo const result = itemShipInfo
.filter(item => { .filter(item => {
try { try {
@ -391,29 +492,16 @@ onMounted(async () => {
}, },
}); });
tempShorePowerInstance.push({ storePowerId: item.id, storePowerInstance: xelectricalBoxModel }) tempShorePowerInstance.push({ storePowerId: item.id, storePowerInstance: xelectricalBoxModel })
if (['国投-206#泊位-高压', '国投-207#泊位-高压', '国投-208#泊位-高压'].includes(item.name)) { const foundShorePower = tempDistributionBoxInstance.find(tempDistributionBoxItem => tempDistributionBoxItem.distributionId === item.equipmentId);
const status = item.storePowerStatus == '在⽤' ? 1 : 0 if (foundShorePower) {
arr.arr1.push({ xelectricalBoxModel, status }) distributionBoxAndShorePowerInstance.push({
} ...foundShorePower,
if (['国投-209#泊位-高压', '国投-210#泊位-高压'].includes(item.name)) { storePowerInstance: xelectricalBoxModel,
const status = item.storePowerStatus == '在⽤' ? 1 : 0 storePowerId: item.id,
arr.arr2.push({ xelectricalBoxModel, status }) status: item.storePowerStatus == '在⽤' ? 1 : 0
} });
if (['国投-203#泊位-高压', '国投-204#泊位-高压', '国投-205#泊位-高压'].includes(item.name)) {
const status = item.storePowerStatus == '在⽤' ? 1 : 0
arr.arr3.push({ xelectricalBoxModel, status })
}
if (['华电-806#泊位-高压', '华电-807#泊位-高压'].includes(item.name)) {
const status = item.storePowerStatus == '在⽤' ? 1 : 0
arr.arr4.push({ xelectricalBoxModel, status })
}
if (['华电-808#泊位-高压', '华电-809#泊位-高压', '华电-810#泊位-高压'].includes(item.name)) {
const status = item.storePowerStatus == '在⽤' ? 1 : 0
arr.arr5.push({ xelectricalBoxModel, status })
} }
modelInstance.push({ modelInstance.push({
model: xelectricalBoxModel, model: xelectricalBoxModel,
type: 'shorepower_box', type: 'shorepower_box',
@ -673,24 +761,16 @@ onMounted(async () => {
labelInstance, labelInstance,
oneTitleInstance, oneTitleInstance,
twoTitleInstance, twoTitleInstance,
ShorePowerAndShipInstance ShorePowerAndShipInstance,
distributionBoxAndShorePowerInstance,
} }
} }
const { modelInstance, labelInstance, oneTitleInstance, twoTitleInstance, ShorePowerAndShipInstance } = createMarker() const { modelInstance, labelInstance, oneTitleInstance, twoTitleInstance, ShorePowerAndShipInstance, distributionBoxAndShorePowerInstance } = createMarker()
console.log('ShorePowerAndShipInstance', ShorePowerAndShipInstance)
globalModelInstance = modelInstance globalModelInstance = modelInstance
// const xitemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5) // const xitemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
const tempExe = [
{ lat: 38.948008652494806, lon: 118.46346061248573 },
{ lat: 38.94642526558039, lon: 118.46849658668688 },
{ lat: 38.95748975990655, lon: 118.46023595213505 },
{ lat: 38.98213095396909, lon: 118.46052532224263 },
{ lat: 38.98924677121887, lon: 118.46049790935167 },
]
// 创建流动线材质 // 创建流动线材质
function createFlowMaterial(status) { function createFlowMaterial(status) {
console.log(status)
return new PolylineFlowMaterialProperty({ return new PolylineFlowMaterialProperty({
color: status ? Cesium.Color.LIME : Cesium.Color.YELLOW, color: status ? Cesium.Color.LIME : Cesium.Color.YELLOW,
duration: 5000, // 动画持续时间(毫秒) duration: 5000, // 动画持续时间(毫秒)
@ -737,109 +817,36 @@ onMounted(async () => {
}); });
}); });
} }
createShipAndShorePowerLine() function createDistributionBoxAndShorePowerLine() {
function tempCreate(item) { distributionBoxAndShorePowerInstance.forEach((entityItem, idx) => {
tempExe.forEach((exeItem, index) => { console.log('distributionBoxAndShorePowerInstance', entityItem)
const wgsCoords = coordtransform.wgs84togcj02(exeItem.lon, exeItem.lat); const distributionBoxEntity = entityItem.distributionBoxModel
const xposition = Cesium.Cartesian3.fromDegrees(exeItem.lon, exeItem.lat, 1); const shorePowerEntity = entityItem.storePowerInstance
const xelectricalBoxModel = viewer.entities.add({ // const entity = entityItem.xelectricalBoxModel
name: '岸电箱', // 创建唯一的线实体ID
position: xposition, const lineEntity = viewer.entities.add({
// 添加唯一标识用于识别点击事件 name: `connection_line_${idx}`,
properties: { polyline: {
modelType: 'electrical_box', positions: new Cesium.CallbackProperty(() => {
// data: itemWithModel // 获取主岸电箱的位置
}, const mainPosition = distributionBoxEntity.position.getValue(viewer.clock.currentTime);
orientation: Cesium.Transforms.headingPitchRollQuaternion( // 获取目标实体的位置
xposition, const targetPosition = shorePowerEntity.position.getValue(viewer.clock.currentTime);
new Cesium.HeadingPitchRoll(
Cesium.Math.toRadians(150), // 航向角 (绕Z轴旋转)
Cesium.Math.toRadians(0), // 俯仰角 (绕Y轴旋转)
Cesium.Math.toRadians(0) // 翻滚角 (绕X轴旋转)
)
),
model: {
uri: '/model/electrical_box.glb',
scale: 1.5,
enableDepthTest: true,
backFaceCulling: true
},
});
const MODEL_HEIGHT_METERS = 80;
// 1. 获取模型的世界坐标 (xposition)
// xposition = Cesium.Cartesian3.fromDegrees(wgsCoords[0], wgsCoords[1], 1);
// 2. 将标签的位置计算为：模型位置 + 高度偏移
// 我们需要沿着地球的法线方向（即向上）偏移。
// 获取模型位置的地理坐标 (经度, 纬度, 高度)
const cartographic = Cesium.Cartographic.fromCartesian(xposition);
// 增加高度，将标签放置在模型顶部上方
const labelAltitude = cartographic.height + MODEL_HEIGHT_METERS;
// 将新的地理坐标转换回世界坐标作为标签的位置
const labelPosition = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
labelAltitude
);
// 添加 Label 实体
viewer.entities.add({
// 使用 3D 空间计算出的新位置
position: labelPosition,
name: '配电室',
label: {
text: '配电室',
font: '24px sans-serif',
fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
// *** 关键设置 1：禁用深度测试，确保标签显示在模型上方 ***
// 确保它不会被模型或地球遮挡。
disableDepthTest: true,
// 关键设置 2：移除 pixelOffset（因为我们使用了 3D 位置偏移）
// pixelOffset: new Cesium.Cartesian2(0, 0),
// 关键设置 3：控制文字大小随距离缩放 (实现“真实大小”效果) // 返回包含两个点的数组（起点和终点）
// 使用 near/far scalar 控制，避免缩放地图时文字过大 return [mainPosition, targetPosition];
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 50000, 0.1) }, false),
// ⚠️ 请根据您的场景调整这四个参数 width: 3,
material: createFlowMaterial(0),
// 启用深度测试，使线条能够被地形遮挡
enableDepthTest: true
} }
}); });
// 创建连接线：将xelectricalBoxModel与arr中的每个实体连接 });
arr[`arr${index + 1}`].forEach((entityItem, idx) => {
console.log(entityItem)
const entity = entityItem.xelectricalBoxModel
// 创建唯一的线实体ID
const lineEntity = viewer.entities.add({
name: `connection_line_${idx}`,
polyline: {
positions: new Cesium.CallbackProperty(() => {
// 获取主岸电箱的位置
const mainPosition = xelectricalBoxModel.position.getValue(viewer.clock.currentTime);
// 获取目标实体的位置
const targetPosition = entity.position.getValue(viewer.clock.currentTime);
// 返回包含两个点的数组（起点和终点）
return [mainPosition, targetPosition];
}, false),
width: 3,
material: createFlowMaterial(0),
// 启用深度测试，使线条能够被地形遮挡
enableDepthTest: true
}
});
});
})
} }
tempCreate()
createShipAndShorePowerLine()
createDistributionBoxAndShorePowerLine()
// 设置初始视角 // 设置初始视角
viewer.camera.flyTo(createView(presetViews.overview)); viewer.camera.flyTo(createView(presetViews.overview));
@ -883,7 +890,8 @@ onMounted(async () => {
const cartographic = Cesium.Cartographic.fromCartesian(cartesian); const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
const longitude = Cesium.Math.toDegrees(cartographic.longitude); const longitude = Cesium.Math.toDegrees(cartographic.longitude);
const latitude = Cesium.Math.toDegrees(cartographic.latitude); const latitude = Cesium.Math.toDegrees(cartographic.latitude);
console.log(`当前点击位置的经纬度: 经度 ${longitude}°, 纬度 ${latitude}°`); const gcj02 = coordtransform.wgs84togcj02(longitude, latitude);
console.log(`当前点击位置的经纬度: 经度 ${gcj02[0]}°, 纬度 ${gcj02[1]}°`);
} }
if (Cesium.defined(pickedObject)) { if (Cesium.defined(pickedObject)) {
@ -894,7 +902,7 @@ onMounted(async () => {
const type = entity.properties.modelType.getValue(); const type = entity.properties.modelType.getValue();
console.log(`点击了一个实体。类型是: ${type}`); console.log(`点击了一个实体。类型是: ${type}`);
if (type === 'shorepower_box' || type === 'ship') { if (type === 'shorepower_box' || type === 'ship' || type === 'distribution_box') {
console.log(entity.properties.data.getValue()) console.log(entity.properties.data.getValue())
// onElectricalBoxClick(entity.properties.data.getValue()) // onElectricalBoxClick(entity.properties.data.getValue())
// 触发自定义点击事件 // 触发自定义点击事件

107
public/map/index.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<div> <div>
<PublicMapComponents ref="mapComponentRef" class="map-base" :shore-power-list="ShorePowerList" <PublicMapComponents ref="mapComponentRef" class="map-base" :shore-power-list="ShorePowerList"
:ship-data-list="shipDataList" v-if="dataLoad" :on-instance-click="handleElectricalBoxClick" /> :ship-data-list="shipDataList" v-if="dataLoad" :on-instance-click="handleElectricalBoxClick"
:distribution-data-list="distributionDataList" />
<div v-else class="loading"> <div v-else class="loading">
<div class="loading-container"> <div class="loading-container">
<el-space direction="vertical" size="large"> <el-space direction="vertical" size="large">
@ -32,8 +33,7 @@
:realtime-device-data="realtimeDeviceData" :shore-power-list="ShorePowerList" :ship-data-list="shipDataList" /> --> :realtime-device-data="realtimeDeviceData" :shore-power-list="ShorePowerList" :ship-data-list="shipDataList" /> -->
<!-- </template> --> <!-- </template> -->
<ShowData v-show="activeHeadGroup === 0" :handleGoToModule="handleGoToModule" <ShowData v-show="activeHeadGroup === 0" :handleGoToModule="handleGoToModule"
:realtime-device-data-time="realtimeDeviceDataTime" :chart-data="chartData" :realtime-device-data-time="realtimeDeviceDataTime" :chart-data="chartData" :ship-total-data="shipTotalData"
:company-shore-power-build-data="companyShorePowerBuildData" :ship-total-data="shipTotalData"
:ship-data-list="shipDataList" @item-click="handleSwitch" :realtime-device-data="realtimeDeviceData" :ship-data-list="shipDataList" @item-click="handleSwitch" :realtime-device-data="realtimeDeviceData"
v-if="dataLoad" :company-shore-power-data="companyComparisonData" :year-data="yearDataRes" v-if="dataLoad" :company-shore-power-data="companyComparisonData" :year-data="yearDataRes"
:month-data="monthDataRes" :day-data="dayDataRes" /> :month-data="monthDataRes" :day-data="dayDataRes" />
@ -41,13 +41,14 @@
<!-- 港口岸电使用情况多数据 --> <!-- 港口岸电使用情况多数据 -->
<ShorePowerUsage v-show="activeHeadGroup === 1" :realtime-device-data-time="realtimeDeviceDataTime" <ShorePowerUsage v-show="activeHeadGroup === 1" :realtime-device-data-time="realtimeDeviceDataTime"
:realtime-device-data="realtimeDeviceData" :active-head-group="activeHeadGroup" :realtime-device-data="realtimeDeviceData" :active-head-group="activeHeadGroup"
:initial-time-range="selectedTimeRange" v-if="dataLoad" :handleGoBack="handleGoBack" /> :initial-time-range="selectedTimeRange" v-if="dataLoad" :handleGoBack="handleGoBack" :year-data="yearDataRes"
:month-data="monthDataRes" :day-data="dayDataRes" />
<!-- 港口岸电使用情况单数据 --> <!-- 港口岸电使用情况单数据 -->
<ShorePowerUsageSingleData v-if="activeHeadGroup === 5 && dataLoad" <ShorePowerUsageSingleData v-if="activeHeadGroup === 5 && dataLoad"
:realtime-device-data-time="realtimeDeviceDataTime" :realtime-device-data="realtimeDeviceData" :realtime-device-data-time="realtimeDeviceDataTime" :realtime-device-data="realtimeDeviceData"
:active-head-group="activeHeadGroup" :initial-time-range="selectedTimeRange" :handleGoBack="handleGoBack" :active-head-group="activeHeadGroup" :initial-time-range="selectedTimeRange" :handleGoBack="handleGoBack"
:comparative-data="comparativeData" /> :comparative-data="comparativeData" :year-data="yearDataRes" :month-data="monthDataRes" :day-data="dayDataRes" />
<!-- 港口企业岸电使用 --> <!-- 港口企业岸电使用 -->
<!-- <template v-if="activeHeadGroup === 2"> --> <!-- <template v-if="activeHeadGroup === 2"> -->
@ -245,6 +246,46 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="selectedElectricalBox.type === 'distribution_box'" class="right-two-row">
<div class="card digital-twin-card--deep-blue">
<div class="card-title">
<el-button class="close-btn" size="small" type="text" @click="closeElectricalBoxInfo">×</el-button>
<div class="vertical-line"></div>
<img src="@/assets/svgs/data.svg" class="title-icon" />
<span class="title-text">配电箱详情</span>
</div>
<div class="card-content">
<div class="ship-detail">
<div class="detail-item">
<span class="label">名称:</span>
<span class="value">{{ selectedElectricalBox.data?.name }}</span>
</div>
<div class="detail-item">
<span class="label">所属企业:</span>
<span class="value">{{ getOperationTypeLabel(selectedElectricalBox.data.dockId,
dockMapList,
) }}</span>
</div>
<div class="detail-item">
<span class="label">电压:</span>
<span class="value">{{ selectedElectricalBox.data?.voltage }}</span>
</div>
<div class="detail-item">
<span class="label">频率:</span>
<span class="value">{{ selectedElectricalBox.data?.frequency }} </span>
</div>
<div class="detail-item">
<span class="label">容量:</span>
<span class="value">{{ selectedElectricalBox.data?.capacity }}</span>
</div>
<!-- <div class="detail-item">
<span class="label">当前总用量:</span>
<span class="value">123123</span>
</div> -->
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
</div> </div>
@ -263,7 +304,7 @@ import dayjs from 'dayjs'
import { onMounted, onUnmounted, ref, computed, watch } from 'vue' import { onMounted, onUnmounted, ref, computed, watch } from 'vue'
import { Loading } from '@element-plus/icons-vue' import { Loading } from '@element-plus/icons-vue'
import { MapApi } from "@/api/shorepower/map"; import { MapApi } from "@/api/shorepower/map";
import { CompanyShorePowerBuildDataItem, CompanyShorePowerData, ComparativeData, RealtimeDeviceData, ShipBasicInfoRespVO, ShipRespVo, ShorePowerBerth } from '@/types/shorepower' import { CompanyShorePowerBuildDataItem, CompanyShorePowerData, ComparativeData, RealtimeDeviceData, ShipBasicInfoRespVO, ShipRespVo, ShorePowerBerth, TimeRange } from '@/types/shorepower'
import { BERTH_TYPE, DOCK_DISTRICT, getOperationTypeLabel, HARBOR_DISTRICT, SHORE_POWER_STATUS, UNUSED_SHORE_POWER_REASON } from './components/dictionaryTable' import { BERTH_TYPE, DOCK_DISTRICT, getOperationTypeLabel, HARBOR_DISTRICT, SHORE_POWER_STATUS, UNUSED_SHORE_POWER_REASON } from './components/dictionaryTable'
import { formatDuration, formatTimestamp, getValueById, showStatus } from './components/utils' import { formatDuration, formatTimestamp, getValueById, showStatus } from './components/utils'
defineOptions({ name: 'PublicMap' }) defineOptions({ name: 'PublicMap' })
@ -285,7 +326,7 @@ const headGroupList = ref<{ value: number, label: string }[]>([
]) ])
const activeHeadGroup = ref<number>(0) const activeHeadGroup = ref<number>(0)
const selectedTimeRange = ref<string>('day') const selectedTimeRange = ref<TimeRange>('day')
// 定义子组件类型 // 定义子组件类型
interface PublicMapComponentsType { interface PublicMapComponentsType {
@ -314,6 +355,9 @@ const selectHeadGroup = async (value: number) => {
// 实时时间显示 // 实时时间显示
const currentTime = ref<string>(dayjs().format('YYYY-MM-DD HH:mm:ss')) const currentTime = ref<string>(dayjs().format('YYYY-MM-DD HH:mm:ss'))
// 配电箱数据列表
const distributionDataList = ref<CompanyShorePowerData[]>([])
// 实时设备采集值 // 实时设备采集值
const realtimeDeviceData = ref<RealtimeDeviceData[]>([]) const realtimeDeviceData = ref<RealtimeDeviceData[]>([])
// 实时设备采集值更新时间 // 实时设备采集值更新时间
@ -323,10 +367,11 @@ const ShorePowerList = ref<(ShorePowerBerth & { position: string; })[]>([])
const shipDataList = ref<ShipRespVo[]>([]) const shipDataList = ref<ShipRespVo[]>([])
const dataLoad = ref<boolean>(false) const dataLoad = ref<boolean>(false)
const dockList = ref<{ id: number, name: string }[]>([]) const dockList = ref<{ id: number, name: string }[]>([])
const dockMapList = ref<{ value: number, label: string }[]>([])
const berthList = ref<{ id: number, name: string, dockId: number }[]>([]) const berthList = ref<{ id: number, name: string, dockId: number }[]>([])
const yearDataRes = ref<any>({}) const yearDataRes = ref<RealtimeDeviceData[]>([])
const monthDataRes = ref<any>({}) const monthDataRes = ref<RealtimeDeviceData[]>([])
const dayDataRes = ref<any>({}) const dayDataRes = ref<RealtimeDeviceData[]>([])
const companyComparisonData = ref<CompanyShorePowerData[]>([]) const companyComparisonData = ref<CompanyShorePowerData[]>([])
@ -711,6 +756,10 @@ const yearEnergyUsing = computed(() => {
// 监听组件挂载 // 监听组件挂载
onMounted(async () => { onMounted(async () => {
dockList.value = await MapApi.getDockIdAndNameList() dockList.value = await MapApi.getDockIdAndNameList()
dockMapList.value = dockList.value.map(item => ({
value: item.id,
label: item.name,
}))
berthList.value = await MapApi.getBerthIdAndNameList() berthList.value = await MapApi.getBerthIdAndNameList()
// 延迟启动滚动，确保DOM已渲染 // 延迟启动滚动，确保DOM已渲染
const firstData = await handleGetRealtimeAllData() const firstData = await handleGetRealtimeAllData()
@ -733,7 +782,7 @@ onMounted(async () => {
await handleGetStorePower() await handleGetStorePower()
const tempBuildShipData = await handleGetShipData() const tempBuildShipData = await handleGetShipData()
handleBuildCompanyShorePowerYear(tempBuildShipData) handleBuildCompanyShorePowerYear(tempBuildShipData)
getDistributionBoxDataList()
await handleGetBuildData() await handleGetBuildData()
dataLoad.value = true dataLoad.value = true
getRealtimeIntervalId = setInterval(async () => { getRealtimeIntervalId = setInterval(async () => {
@ -889,25 +938,25 @@ const handleGetlRangeData = async (realtimeDeviceData: RealtimeDeviceData[]) =>
// year: new Date().getFullYear() // year: new Date().getFullYear()
} }
if (!params.ids) return; if (!params.ids) return;
let yearDataRes: RealtimeDeviceData[] = [] /* let yearDataRes: RealtimeDeviceData[] = []
let monthDataRes: RealtimeDeviceData[] = [] let monthDataRes: RealtimeDeviceData[] = []
let dayDataRes: RealtimeDeviceData[] = [] let dayDataRes: RealtimeDeviceData[] = [] */
try { /* try {
yearDataRes = await MapApi.getYearDataByIdList(params); yearDataRes = await MapApi.getYearDataByIdList(params);
monthDataRes = await MapApi.getMonthDataByIdList(params); monthDataRes = await MapApi.getMonthDataByIdList(params);
dayDataRes = await MapApi.getDayDataByIdList(params); dayDataRes = await MapApi.getDayDataByIdList(params);
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} } */
// const quarterDataRes: deviceData = await MapApi.getQuarterDataByIdList(params); // const quarterDataRes: deviceData = await MapApi.getQuarterDataByIdList(params);
const realTimeSum = res.reduce((acc, item) => acc + item.measureValue, 0); const realTimeSum = res.reduce((acc, item) => acc + item.measureValue, 0);
const daySum = realTimeSum - Object.values(dayDataRes).reduce((acc, item) => acc + item.measureValue, 0); const daySum = realTimeSum - Object.values(dayDataRes.value).reduce((acc, item) => acc + item.measureValue, 0);
const monthSum = realTimeSum - Object.values(monthDataRes).reduce((acc, item) => acc + item.measureValue, 0); const monthSum = realTimeSum - Object.values(monthDataRes.value).reduce((acc, item) => acc + item.measureValue, 0);
// const quarterSum = Object.values(quarterDataRes).reduce((acc, item) => acc + item.measureValue, 0); // const quarterSum = Object.values(quarterDataRes).reduce((acc, item) => acc + item.measureValue, 0);
const yearSum = realTimeSum - Object.values(yearDataRes).reduce((acc, item) => acc + item.measureValue, 0); const yearSum = realTimeSum - Object.values(yearDataRes.value).reduce((acc, item) => acc + item.measureValue, 0);
// totalPower.value = realTimeSum.toFixed(2) // totalPower.value = realTimeSum.toFixed(2)
// co2Reduction.value = (realTimeSum * 670 / 1000000).toFixed(2) // 克转化为吨 // co2Reduction.value = (realTimeSum * 670 / 1000000).toFixed(2) // 克转化为吨
@ -988,6 +1037,28 @@ const handleGetlRangeData = async (realtimeDeviceData: RealtimeDeviceData[]) =>
} }
} }
const getDistributionBoxDataList = () => {
const tempDistributionList = groupByShorePowerEquipmentId(ShorePowerList.value)
distributionDataList.value = tempDistributionList
// console.log(distributionList)
/* 转换函数 */
function groupByShorePowerEquipmentId(data) {
const map = new Map();
for (const item of data) {
const { shorePowerEquipmentInfo, ...rest } = item;
const id = shorePowerEquipmentInfo.id;
if (!map.has(id)) {
map.set(id, {
...shorePowerEquipmentInfo,
shorePowerList: []
});
}
map.get(id).shorePowerList.push(rest);
}
return Array.from(map.values());
}
}
const handleBuildCompanyShorePower = (realtimeDeviceData: RealtimeDeviceData[]) => { const handleBuildCompanyShorePower = (realtimeDeviceData: RealtimeDeviceData[]) => {
const realtimeBuildData = dockList.value.map(dock => { const realtimeBuildData = dockList.value.map(dock => {
const children = berthList.value const children = berthList.value

Write Preview
Loading…
Cancel
Save