From 970cadcca8b82ed4d59bcfc6edb42472025f82c7 Mon Sep 17 00:00:00 2001
From: jiangAB <jiangjin514@foxmail.com>
Date: Tue, 23 Dec 2025 17:21:47 +0800
Subject: [PATCH] update

---
 public/map/components/CompanyShorePower.vue | 266 ++++++++++++++++----
 public/map/components/ShorePowerUsage.vue   |   4 +-
 public/map/components/cesiumMap.vue         |  22 +-
 public/map/index.vue                        |  44 +++-
 4 files changed, 263 insertions(+), 73 deletions(-)

diff --git a/public/map/components/CompanyShorePower.vue b/public/map/components/CompanyShorePower.vue
index c659656..dad9138 100644
--- a/public/map/components/CompanyShorePower.vue
+++ b/public/map/components/CompanyShorePower.vue
@@ -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;
diff --git a/public/map/components/ShorePowerUsage.vue b/public/map/components/ShorePowerUsage.vue
index 8f969b2..50f5fe1 100644
--- a/public/map/components/ShorePowerUsage.vue
+++ b/public/map/components/ShorePowerUsage.vue
@@ -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;
 }
diff --git a/public/map/components/cesiumMap.vue b/public/map/components/cesiumMap.vue
index 019d53c..b289fec 100644
--- a/public/map/components/cesiumMap.vue
+++ b/public/map/components/cesiumMap.vue
@@ -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 },
     ]
 
     // 创建流动线材质
diff --git a/public/map/index.vue b/public/map/index.vue
index cb1e67a..240fba5 100644
--- a/public/map/index.vue
+++ b/public/map/index.vue
@@ -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;