diff --git a/public/map/components/CompanyShorePower.vue b/public/map/components/CompanyShorePower.vue index d723b29..666fe9d 100644 --- a/public/map/components/CompanyShorePower.vue +++ b/public/map/components/CompanyShorePower.vue @@ -8,7 +8,12 @@
码头与泊位信息 +
更新时间: {{ realtimeDeviceDataTime }}
+ + + 返回 + + 返回 +
{{timeRangeOptions.find(option => option.value === timeRange)?.label || @@ -507,6 +510,7 @@ import { formatTimestamp, parseRangeToTimestamp } from './utils'; interface Props { realtimeDeviceData: RealtimeDeviceData[]; activeHeadGroup?: number; + handleGoBack?: () => void; } const props = defineProps() @@ -1166,7 +1170,7 @@ onBeforeUnmount(() => { } .magnify { - width: 40%; + width: 100%; padding: 12px; height: calc(100vh - 72px); position: absolute; diff --git a/public/map/components/ShowData.vue b/public/map/components/ShowData.vue new file mode 100644 index 0000000..bacc360 --- /dev/null +++ b/public/map/components/ShowData.vue @@ -0,0 +1,648 @@ + + + + + \ No newline at end of file diff --git a/public/map/components/cesiumMap.vue b/public/map/components/cesiumMap.vue index eb2338c..353ae20 100644 --- a/public/map/components/cesiumMap.vue +++ b/public/map/components/cesiumMap.vue @@ -196,6 +196,27 @@ const createView = (obj) => { } } +// 公用函数：创建带颜色和闪烁效果的标签（无缩放，有光晕效果） +const createPulsingLabel = (text, color) => { + return { + text: text, + font: '28px sans-serif', + fillColor: new Cesium.CallbackProperty(function (time, result) { + // t 会随着时间不断变化 + const t = Cesium.JulianDate.toDate(time).getTime() / 1000; + // 通过改变透明度实现闪烁效果 + const alpha = 0.7 + Math.sin(t * 4) * 0.3; // 透明度在 0.4-1.0 之间变化 + return color.withAlpha(alpha); + }, false), + outlineColor: Cesium.Color.BLACK, + outlineWidth: 2, + style: Cesium.LabelStyle.FILL_AND_OUTLINE, + disableDepthTest: true, + scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 50000, 0.1) + // 移除了 scale 属性以保持文字大小不变 + }; +}; + onMounted(async () => { if (!Cesium) { console.error("Cesium 对象未找到，请检查 index.html 文件！"); @@ -826,43 +847,16 @@ onMounted(async () => { type: 'ship', 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, - name: '船', - properties: { - modelType: 'ship', - data: item - }, - label: { - text: item.shipBasicInfo.name, - font: '28px sans-serif', - fillColor: Cesium.Color.LIME, - outlineColor: Cesium.Color.BLACK, - outlineWidth: 2, - style: Cesium.LabelStyle.FILL_AND_OUTLINE, - disableDepthTest: true, - scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 50000, 0.1) - } - }); - labelInstance.push(xelectricalBoxLabel) - + let labelColor = null let statusImage = null; if (item.shipStatus === '正常') { // statusImage = null; } else if (item.shipStatus === '超容') { statusImage = '/img/故障.png'; + labelColor = Cesium.Color.YELLOW; // 超容时红色 } else { statusImage = '/img/未连接.png'; + labelColor = Cesium.Color.RED; // 未连接或离线时红色 } // 只有当需要显示状态图标时才添加实体 if (statusImage) { @@ -887,6 +881,36 @@ onMounted(async () => { }); } + 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, + name: '船', + properties: { + modelType: 'ship', + data: item + }, + label: !labelColor ? { + text: item.shipBasicInfo.name, + font: '28px sans-serif', + fillColor: Cesium.Color.LIME, + outlineColor: Cesium.Color.BLACK, + outlineWidth: 2, + style: Cesium.LabelStyle.FILL_AND_OUTLINE, + disableDepthTest: true, + scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 50000, 0.1) + } : createPulsingLabel(item.shipBasicInfo.name, labelColor) + }); + labelInstance.push(xelectricalBoxLabel) + + /* if (!itemShipInfo) { return; } */ diff --git a/public/map/index.vue b/public/map/index.vue index f85a4c9..f2c57c7 100644 --- a/public/map/index.vue +++ b/public/map/index.vue @@ -10,17 +10,14 @@
曹妃甸港区船舶岸电监管平台 -
- 概览视角 - -
-
- {{ item.label }} +
+
+ 概览视角
-
{{ currentTime }}
+ +
@@ -29,23 +26,27 @@ :shore-power-status-data="shorePowerStatusData" @item-click="handleSwitch" :realtime-device-data="realtimeDeviceData" :shore-power-list="ShorePowerList" :ship-data-list="shipDataList" /> --> + + :active-head-group="activeHeadGroup" v-if="dataLoad" :handleGoBack="handleGoBack" /> + :shore-power-list="ShorePowerList" :handleGoBack="handleGoBack" + :realtime-device-data-time="realtimeDeviceDataTime" /> + @item-click="handleSwitch" :realtime-device-data="realtimeDeviceData" v-if="dataLoad" + :handleGoBack="handleGoBack" />