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

update

feature
jiangAB 3 weeks ago
parent
9e7040ec83
commit
970cadcca8
4 changed files with 263 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 266
      public/map/components/CompanyShorePower.vue
  2. 4
      public/map/components/ShorePowerUsage.vue
  3. 22
      public/map/components/cesiumMap.vue
  4. 44
      public/map/index.vue

266
public/map/components/CompanyShorePower.vue
View File

@ -1,58 +1,6 @@
<template>
<div class="company-shore-power">
<div class="left" style="width: 1000px;">
<!-- 码头信息卡片 -->
<div class="card digital-twin-card--deep-blue">
<div class="card-title" style="display: flex; align-items: center; justify-content: space-between;">
<div class="card-title">
<div class="vertical-line"></div>
<img src="@/assets/svgs/data.svg" class="title-icon" />
<span class="title-text">码头与泊位信息</span>
</div>
<!-- 返回上个页面 -->
<el-button type="primary" @click.stop="handleGoBack()">返回</el-button>
<!-- <div>
<el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" />
</div> -->
</div>
<div class="card-content">
<div v-for="company in companyComparisonData" :key="company.name" class="company-section">
<div class="data-update-time">起始时间: {{ getStartTimeByRange(getCompanyTimeRange(company.id)) }} 更新时间: {{
realtimeDeviceDataTime }}</div>
<div class="company-header">
<div class="company-info">
<div class="company-name">{{ company.name }}</div>
<div class="company-berth-count">泊位数: {{ company.children?.length || 0 }}</div>
</div>
<div class="time-range-container">
<button v-for="option in timeRangeOptions" :key="option.value"
:class="['time-range-btn', { active: getCompanyTimeRange(company.id) === option.value }]"
@click.stop="() => handleTimeRangeChange(company.id, option.value)">
{{ option.label }}
</button>
<div class="company-total">总量: {{ calculateTotal(company.children).toFixed(2) }}</div>
</div>
</div>
<div class="overview-grid">
<div v-for="(berth, index) in (company.children || [])" :key="index" class="overview-item"
@click="handleClickBerthItem(berth)">
<div class="overview-value">{{ berth.measureValue?.toFixed(2)
|| 0 }}</div>
<div class="overview-label">{{ berth.name }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right" style="width: 800px;" :style="{ width: selectedShorePowerItem ? '800px' : '420px' }">
<div class="left" style="width: 800px;" :style="{ width: selectedShorePowerItem ? '800px' : '420px' }">
<div style="display: flex; gap: 12px; height: 100%;">
<div v-if="selectedShorePowerItem" class="card digital-twin-card--deep-blue">
<div style="display: flex; align-items: center; justify-content: space-between;">
@ -163,6 +111,58 @@
</div>
</div>
</div>
<div class="right" style="width: 1000px;">
<!-- 码头信息卡片 -->
<div class="card digital-twin-card--deep-blue">
<div class="card-title" style="display: flex; align-items: center; justify-content: space-between;">
<div class="card-title">
<div class="vertical-line"></div>
<img src="@/assets/svgs/data.svg" class="title-icon" />
<span class="title-text">码头与泊位信息</span>
</div>
<!-- 返回上个页面 -->
<el-button type="primary" @click.stop="handleGoBack()">返回</el-button>
<!-- <div>
<el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" />
</div> -->
</div>
<div class="card-content">
<div v-for="company in companyComparisonData" :key="company.name" class="company-section">
<div class="data-update-time">起始时间: {{ getStartTimeByRange(getCompanyTimeRange(company.id)) }} 更新时间: {{
realtimeDeviceDataTime }}</div>
<div class="company-header">
<div class="company-info">
<div class="company-name">{{ company.name }}</div>
<div class="company-berth-count">泊位数: {{ company.children?.length || 0 }}</div>
</div>
<div class="time-range-container">
<button v-for="option in timeRangeOptions" :key="option.value"
:class="['time-range-btn', { active: getCompanyTimeRange(company.id) === option.value }]"
@click.stop="() => handleTimeRangeChange(company.id, option.value)">
{{ option.label }}
</button>
<div class="company-total">总量: {{ calculateTotal(company.children).toFixed(2) }}</div>
</div>
</div>
<div class="overview-grid">
<div v-for="(berth, index) in (company.children || [])" :key="index" class="overview-item"
@click="handleClickBerthItem(berth)">
<div class="overview-value">{{ berth.measureValue?.toFixed(2)
|| 0 }}</div>
<div class="overview-label">{{ berth.name }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ship-history-dialog v-model="historyVisible.visible" :ship-param="historyVisible.searchParams"
:realtime-device-data="realtimeDeviceData" />
</div>
@ -383,6 +383,165 @@ const handleGetBuildData = async () => {
}))
}))
companyComparisonData.value = buildData
companyComparisonData.value.push(
{
"id": 4,
"harborDistrictId": 1,
"name": "模拟码头公司4",
"children": [
{
"id": 6,
"dockId": 3,
"districtId": 1,
"name": "模拟-201#泊位",
"deviceId": 6,
"deviceName": "模拟-1号岸电-201泊位",
"deviceCode": "CFD_GT_201_0.4KV.Kwh",
"deviceStatus": 3,
"measureValue": 3344627.0265,
"incrementValue": 17.846733086563358,
"incrementCost": 17.846733086563358,
"measureTime": 1766479519223,
"createTime": null
},
{
"id": 7,
"dockId": 3,
"districtId": 1,
"name": "模拟-202#泊位",
"deviceId": 7,
"deviceName": "模拟-1号岸电-202泊位",
"deviceCode": "CFD_GT_202_0.4KV.Kwh",
"deviceStatus": 3,
"measureValue": 5338783.7211,
"incrementValue": 20.846911166236122,
"incrementCost": 20.846911166236122,
"measureTime": 1766479519223,
"createTime": null
},
{
"id": 8,
"dockId": 3,
"districtId": 1,
"name": "模拟-203#泊位",
"deviceId": 8,
"deviceName": "模拟-2号岸电-203泊位",
"deviceCode": "CFD_GT_203_6/6.6KV.Kwh",
"deviceStatus": 3,
"measureValue": 10921413.801,
"incrementValue": 19.737663764627705,
"incrementCost": 19.737663764627705,
"measureTime": 1766479519223,
"createTime": null
},
{
"id": 9,
"dockId": 3,
"districtId": 2,
"name": "模拟-204#泊位",
"deviceId": 9,
"deviceName": "模拟-2号岸电-204泊位",
"deviceCode": "CFD_GT_204_6/6.6KV.Kwh",
"deviceStatus": 3,
"measureValue": 2680281.7026,
"incrementValue": 21.264192979883447,
"incrementCost": 21.264192979883447,
"measureTime": 1766479519223,
"createTime": null
},
{
"id": 10,
"dockId": 3,
"districtId": 2,
"name": "模拟-205#泊位",
"deviceId": 10,
"deviceName": "模拟-2号岸电-205泊位",
"deviceCode": "CFD_GT_205_6/6.6KV.Kwh",
"deviceStatus": 3,
"measureValue": 4975354.5181,
"incrementValue": 21.75554591307556,
"incrementCost": 21.75554591307556,
"measureTime": 1766479519223,
"createTime": null
},
{
"id": 11,
"dockId": 3,
"districtId": null,
"name": "模拟-206#泊位",
"deviceId": 11,
"deviceName": "模拟-3号岸电-206泊位",
"deviceCode": "CFD_GT_206_6/6.6KV.Kwh",
"deviceStatus": 3,
"measureValue": 4900877.9997,
"incrementValue": 17.841940952939577,
"incrementCost": 17.841940952939577,
"measureTime": 1766479519223,
"createTime": null
},
{
"id": 12,
"dockId": 3,
"districtId": null,
"name": "国投-207#泊位",
"deviceId": 12,
"deviceName": "模拟-3号岸电-207泊位",
"deviceCode": "CFD_GT_207_6/6.6KV.Kwh",
"deviceStatus": 3,
"measureValue": 5093718.3972,
"incrementValue": 21.524539074803123,
"incrementCost": 21.524539074803123,
"measureTime": 1766479519223,
"createTime": null
},
{
"id": 13,
"dockId": 3,
"districtId": null,
"name": "模拟-208#泊位",
"deviceId": 13,
"deviceName": "模拟-3号岸电-208泊位",
"deviceCode": "CFD_GT_208_6/6.6KV.Kwh",
"deviceStatus": 4,
"measureValue": 7700103.7496,
"incrementValue": 0,
"incrementCost": 0,
"measureTime": 1766479519223,
"createTime": null
},
{
"id": 14,
"dockId": 3,
"districtId": null,
"name": "模拟-209#泊位",
"deviceId": 14,
"deviceName": "模拟-4号岸电-209泊位",
"deviceCode": "CFD_GT_209_6/6.6KV.Kwh",
"deviceStatus": 4,
"measureValue": 3845558.9787,
"incrementValue": 0,
"incrementCost": 0,
"measureTime": 1766479519223,
"createTime": null
},
{
"id": 15,
"dockId": 3,
"districtId": null,
"name": "模拟-210#泊位",
"deviceId": 15,
"deviceName": "模拟-4号岸电-210泊位",
"deviceCode": "CFD_GT_210_6/6.6KV.Kwh",
"deviceStatus": 4,
"measureValue": 3649994.7502,
"incrementValue": 0,
"incrementCost": 0,
"measureTime": 1766479519223,
"createTime": null
}
]
}
)
/* MapApi.getBerthIdAndNameList().then(res => {
console.log(res)
const buildData = res.map(item => ({
@ -440,6 +599,7 @@ onMounted(() => {
}
.overview-item {
width: 224px;
cursor: pointer;
display: flex;
flex-direction: column;

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

@ -1066,13 +1066,13 @@ onBeforeUnmount(() => {
}
.show-value-label {
font-size: 12px;
font-size: 18px;
font-weight: 600;
font-weight: bold;
}
.show-value-value {
font-size: 18px;
font-size: 20px;
font-weight: 600;
font-weight: bold;
}

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

@ -750,8 +750,8 @@ onMounted(async () => {
},
name: '岸电箱 Label',
label: {
text: '岸电箱',
font: '24px sans-serif',
text: item.name ? item.name.replace(/(.*)#(.*)/g, '$1#\n$2') : '',
font: '20px sans-serif',
fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
@ -946,10 +946,10 @@ onMounted(async () => {
position: labelPosition, // 船上方约10米
label: {
text: dataObj.name || `Marker-${item.id || index}`,
font: '22px sans-serif',
fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
font: '24px sans-serif', // 增大字体
fillColor: Cesium.Color.WHITE, // 使用醒目的黄色
outlineColor: Cesium.Color.BLUE, // 使用红色边框
outlineWidth: 1, // 增加边框宽度
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
@ -999,11 +999,11 @@ onMounted(async () => {
globalModelInstance = modelInstance
// const xitemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
const tempExe = [
{ lat: 38.95011597126687, lon: 118.45831747850713 },
{ lat: 38.94718179373664, lon: 118.46547582577227 },
{ lat: 38.95400625667645, lon: 118.45959803541668 },
{ lat: 38.97994932460509, lon: 118.45949374251144 },
{ lat: 38.99238637115607, lon: 118.45970382914341 },
{ 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 },
]
// 创建流动线材质

44
public/map/index.vue
View File

@ -3,8 +3,13 @@
<PublicMapComponents ref="mapComponentRef" class="map-base" :shore-power-list="ShorePowerList"
:ship-data-list="shipDataList" v-if="dataLoad" :on-instance-click="handleElectricalBoxClick" />
<div v-else class="loading">
<div style="margin: 0 auto">
loading
<div class="loading-container">
<el-space direction="vertical" size="large">
<el-icon :size="60" class="is-loading">
<Loading />
</el-icon>
<!-- <span style="color: white; font-size: 18px;">加载中...</span> -->
</el-space>
</div>
</div>
<div class="head">
@ -18,7 +23,6 @@
<span @click="handleClickTitle">曹妃甸港区船舶岸电监管平台</span>
</div>
<!-- <div class="head-time"></div> -->
</div>
<!-- 港区概览 -->
@ -250,6 +254,7 @@ import CompanyShorePower from './components/CompanyShorePower.vue'
import ShipShorePower from './components/ShipShorePower.vue'
import dayjs from 'dayjs'
import { onMounted, onUnmounted, ref, computed, watch } from 'vue'
import { Loading } from '@element-plus/icons-vue'
import { MapApi } from "@/api/shorepower/map";
import { CompanyShorePowerBuildDataItem, RealtimeDeviceData, ShipBasicInfoRespVO, ShipRespVo, ShorePowerBerth } from '@/types/shorepower'
import { BERTH_TYPE, DOCK_DISTRICT, getOperationTypeLabel, HARBOR_DISTRICT, SHORE_POWER_STATUS, UNUSED_SHORE_POWER_REASON } from './components/dictionaryTable'
@ -326,7 +331,7 @@ const scrollSpeed = ref<number>(20) // 滚动速度，越小越快
// 实时数据图表数组
/* const ChartData = ref<ChartDataItem[]>({
}) */
/* const totalPowerChartData = ref<ChartDataItem[]>([])
const co2ReductionChartData = ref<ChartDataItem[]>([])
@ -899,7 +904,7 @@ const handleGetlRangeData = async (realtimeDeviceData: RealtimeDeviceData[]) =>
// 记录实时数据到图表数组
const now = new Date()
/* const timestamp = now.toLocaleTimeString()
// 计算各指标值（转换为合适的单位）并保留两位小数
const totalPowerValue = Number(incrementRealTimeSum.toFixed(2))
const co2Value = Number((incrementRealTimeSum * 670 / 1000).toFixed(2)) // 克转化为千克
@ -915,7 +920,7 @@ const handleGetlRangeData = async (realtimeDeviceData: RealtimeDeviceData[]) =>
noxReductionChartData.value.push({ name: timestamp, value: noxValue })
pm25ReductionChartData.value.push({ name: timestamp, value: pm25Value })
fuelReductionChartData.value.push({ name: timestamp, value: fuelValue })
// 保持数组最多包含20个数据点（对应约3分钟，每10秒一条）
const maxDataPoints = 10
totalPowerChartData.value = totalPowerChartData.value.slice(-maxDataPoints)
@ -1032,6 +1037,26 @@ const handleBuildCompanyShorePowerYear = (shipData: any) => {
display: none !important;
}
.loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.digital-twin-card--deep-blue {
/* 深空蓝背景 */
background: rgba(8, 15, 30, 0.7);
@ -1258,10 +1283,15 @@ const handleBuildCompanyShorePowerYear = (shipData: any) => {
right: 0px;
padding: 12px 24px;
padding-right: 900px;
background: rgba(8, 15, 30, 0.6);
// backdrop-filter: blur(10px);
// -webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(30, 120, 255, 0.2);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
.head-title {
// width: 420px;
font-size: 28px;
font-size: 36px;
color: rgba(20, 200, 255, 1);
text-align: center;
font-weight: bold;

Write Preview
Loading…
Cancel
Save