|
|
@@ -44,54 +44,18 @@
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
- <div v-if="uiDebug" class="map-holo__headline">
|
|
|
- <b>中央“一张图”</b>
|
|
|
- <div class="map-holo__layers">
|
|
|
- <span v-for="layer in LAYERS" :key="layer.label">
|
|
|
- <CockpitIcon :name="layer.icon" size="calc(11 * var(--u, 1px))" />
|
|
|
- {{ layer.label }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="map-holo__bottom" :class="{ 'is-quiet': !uiDebug }">
|
|
|
- <p v-if="uiDebug" class="map-canvas__title">中央一张图占位</p>
|
|
|
- <p v-if="uiDebug" class="map-holo__hint">
|
|
|
- 临时底图 aerial.webp · 票 02 已建常驻宿主(实例 {{ instanceId }})· {{ modeLabel }}
|
|
|
- </p>
|
|
|
- <div class="map-holo__status" :class="{ 'is-quiet': !uiDebug }">
|
|
|
- <i :class="{ 'is-done': summarySettled, 'is-bad': summaryBad }"></i>
|
|
|
- <span>{{ summaryText }}</span>
|
|
|
- <!--
|
|
|
- 票 46:模式图层计划的降级说明(设施数据未就绪 / 管线数据未就绪 /
|
|
|
- 异常设备数据未就绪)。只在本模式确实受影响时出现,**不伪装成空数据**。
|
|
|
- -->
|
|
|
- <span
|
|
|
- v-for="note in modePlan.degradedNotes"
|
|
|
- :key="note.key"
|
|
|
- class="map-holo__degraded"
|
|
|
- :data-map-degraded-note="note.key"
|
|
|
- role="status"
|
|
|
- >{{ note.text }}</span>
|
|
|
- <!--
|
|
|
- 票 09:已画到地图上的标记数与状态分布。
|
|
|
- 放在**这一行内**而不是新起一行:底部信息带每多一行,就会顶到上面那块
|
|
|
- 「无地图位置」浮块(实测多一行即相撞 10px)。图例本身已经带每状态的计数,
|
|
|
- 这里只是把「地图上到底画了几个」再点一句。
|
|
|
- 票 46:引导态没有计数浮标(规格 18),`v-if="entered"` 门控。
|
|
|
- -->
|
|
|
- <span v-if="entered" class="map-holo__markers" data-map-marker-count :title="`已上图状态分布:${markerStatusText}`">
|
|
|
- 点位标记 {{ markerState.onMap }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
+ <!--
|
|
|
+ 票 25:中央「一张图」标题与图层占位已并入右下角的地图信息集合面板。
|
|
|
+ 此处**只保留状态筛选图例**——它是决策 02 冻结的全局组合筛选入口,必须常驻可点。
|
|
|
+ -->
|
|
|
</div>
|
|
|
|
|
|
<!--
|
|
|
- 票 07:不上图对象的可见落点(「无地图位置」+ 具体原因)。
|
|
|
- 判定全在 `domain/coordinate.js`,本组件只把结果画出来。
|
|
|
+ 票 25:原先挂在地图四周的标题、图层占位、底图提示、加载状态、降级说明、标记计数、
|
|
|
+ 坐标准入浮块与引擎读数,已并入**外壳的状态面板**(`CockpitShell.vue` 的
|
|
|
+ `cockpit-shell__status-details`)。它们不再出现在地图上,中央只保留状态筛选图例
|
|
|
+ 与 3D 场景;维护者反馈过另起面板会和图例、外壳面板互相占用容器。
|
|
|
-->
|
|
|
- <MapCoordinateBlocked :overview="coordinateOverview" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -106,6 +70,9 @@ import {
|
|
|
publishSummaryHandle,
|
|
|
resizeMap,
|
|
|
syncPointMarkersForPlan,
|
|
|
+ // 票 24:设施点位与管线图层。与摘要标记分属不同数据源与不同业务对象,
|
|
|
+ // 各自同步,互不写对方的状态。
|
|
|
+ syncPipeLayerForPlan,
|
|
|
unmountMap,
|
|
|
} from '../services/mapService.js'
|
|
|
import { MAP_SUMMARY_PHASE } from '../domain/mapSummary.js'
|
|
|
@@ -120,8 +87,6 @@ import { useDeviceLayerStore } from '../stores/deviceLayerStore.js'
|
|
|
import { useFilterStore } from '../stores/filterStore.js'
|
|
|
import { useMapStore } from '../stores/mapStore.js'
|
|
|
import { useDetailStore } from '../stores/detailStore.js'
|
|
|
-import CockpitIcon from './CockpitIcon.vue'
|
|
|
-import MapCoordinateBlocked from './MapCoordinateBlocked.vue'
|
|
|
import StatusTag from './StatusTag.vue'
|
|
|
|
|
|
const props = defineProps({
|
|
|
@@ -135,19 +100,12 @@ const props = defineProps({
|
|
|
/**
|
|
|
* 票 46:模式图层计划的输出(`domain/modeLayerPlan.js` 的 `planModeLayers()` 结果)。
|
|
|
* 本组件**只消费它**:不自己判模式、不自己过滤 objects、不自己算图例。
|
|
|
- * 传入 `null`(理论不发生)时按空计划处理,保证组件不崩。
|
|
|
+ * 传入
|
|
|
+ull`(理论不发生)时按空计划处理,保证组件不崩。
|
|
|
*/
|
|
|
plan: { type: Object, default: null },
|
|
|
})
|
|
|
|
|
|
-// 图层开关的占位(真实开关见票 21/22);图标名对应 domain/icons.js。
|
|
|
-const LAYERS = [
|
|
|
- { icon: 'layers', label: '管线图层' },
|
|
|
- { icon: 'points', label: '监测点' },
|
|
|
- { icon: 'event', label: '事件定位' },
|
|
|
- { icon: 'resource', label: '应急资源' },
|
|
|
-]
|
|
|
-
|
|
|
// 走 Vite 的 BASE_URL,保证 qiankun / 相对 base 部署下也能取到 public 资源。
|
|
|
const base = import.meta.env.BASE_URL || '/'
|
|
|
const photoUrl = `${base}cockpit/aerial.webp`
|
|
|
@@ -305,6 +263,10 @@ function applyMarkers() {
|
|
|
})
|
|
|
markerState.value = getPointMarkerState()
|
|
|
|
|
|
+ // 票 24:设施点位与管线跟着**同一份模式计划**走 —— 图层显隐因此与监测点标记
|
|
|
+ // 必然一致(计划里 hidden 就是空数组 → 自动撤下),不会出现两套判定打架。
|
|
|
+ syncPipeLayerForPlan(modePlan.value)
|
|
|
+
|
|
|
// 票 46:降级说明写进宿主 dataset(走查断言「数据未就绪 ≠ 空数据」的断言面)。
|
|
|
const host = hostRef.value
|
|
|
if (host && host.dataset) {
|
|
|
@@ -339,7 +301,7 @@ onMounted(() => {
|
|
|
// 票 09/46:摘要翻页、计划变化(模式/引导态/异常设备都在计划里体现)→ 重画一次
|
|
|
// (服务层只消费计划,重画是唯一路径;一个 watch 一份退订,不叠两份)。
|
|
|
stopMarkerWatch = watch(
|
|
|
- () => [mapStore.summary.objects, modePlan.value.markers, modePlan.value.byStatus],
|
|
|
+ () => [mapStore.summary.objects, modePlan.value.markers, modePlan.value.byStatus, modePlan.value.pipelines, modePlan.value.facilities],
|
|
|
() => applyMarkers(),
|
|
|
{ deep: false },
|
|
|
)
|
|
|
@@ -491,51 +453,8 @@ onBeforeUnmount(() => {
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
|
|
|
-.map-holo__headline {
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.map-holo__top b {
|
|
|
- display: block;
|
|
|
- color: #eaf9ff;
|
|
|
- font-size: calc(17 * var(--u, 1px));
|
|
|
- font-weight: 700;
|
|
|
- letter-spacing: 0.14em;
|
|
|
- text-shadow: 0 0 16px rgba(79, 216, 255, 0.85), 0 2px 8px rgba(0, 0, 0, 0.9);
|
|
|
-}
|
|
|
-
|
|
|
-.map-holo__layers {
|
|
|
- display: flex;
|
|
|
- gap: calc(5 * var(--u, 1px));
|
|
|
- justify-content: center;
|
|
|
- margin-top: calc(6 * var(--u, 1px));
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
|
|
|
-.map-holo__layers span {
|
|
|
- display: inline-flex;
|
|
|
- align-items: center;
|
|
|
- gap: calc(4 * var(--u, 1px));
|
|
|
- padding: calc(2 * var(--u, 1px)) calc(8 * var(--u, 1px));
|
|
|
- border: 1px solid rgba(58, 170, 226, 0.42);
|
|
|
- background: rgba(4, 20, 38, 0.66);
|
|
|
- color: #bad4e0;
|
|
|
- font-size: calc(10 * var(--u, 1px));
|
|
|
- letter-spacing: 0.04em;
|
|
|
-}
|
|
|
|
|
|
-.map-holo__bottom {
|
|
|
- position: absolute;
|
|
|
- z-index: 2;
|
|
|
- bottom: calc(8 * var(--u, 1px));
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- display: grid;
|
|
|
- gap: calc(4 * var(--u, 1px));
|
|
|
- justify-items: center;
|
|
|
- text-align: center;
|
|
|
- pointer-events: none;
|
|
|
-}
|
|
|
|
|
|
/* 图例容器:标签外观由 StatusTag 提供(颜色取自 token,语义与颜色不再硬编码在这里) */
|
|
|
.map-holo__legend {
|
|
|
@@ -585,86 +504,17 @@ onBeforeUnmount(() => {
|
|
|
|
|
|
/* 票 35 续:生产形态把底部摘要行也收进**右下角状态日志**那一摞,
|
|
|
中央视野完全空出来(与引擎状态同一条右边线、在其上方)。 */
|
|
|
-.map-holo__bottom.is-quiet {
|
|
|
- left: auto;
|
|
|
- right: calc(var(--column-w, 300px) + 10 * var(--u, 1px));
|
|
|
- bottom: calc(22 * var(--u, 1px));
|
|
|
- transform: none;
|
|
|
- justify-items: end;
|
|
|
- text-align: right;
|
|
|
-}
|
|
|
|
|
|
-.map-canvas__title {
|
|
|
- margin: 0;
|
|
|
- color: #eaf9ff;
|
|
|
- font-size: calc(13 * var(--u, 1px));
|
|
|
- font-weight: 700;
|
|
|
- letter-spacing: 0.16em;
|
|
|
- text-shadow: 0 0 14px rgba(79, 216, 255, 0.7), 0 2px 8px rgba(0, 0, 0, 0.9);
|
|
|
-}
|
|
|
|
|
|
-.map-holo__hint {
|
|
|
- margin: 0;
|
|
|
- color: var(--muted, #6d92ae);
|
|
|
- font-size: calc(10.5 * var(--u, 1px));
|
|
|
- text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
|
|
|
-}
|
|
|
-
|
|
|
-.map-holo__status {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 7px;
|
|
|
- color: var(--muted, #6d92ae);
|
|
|
- font-size: calc(10.5 * var(--u, 1px));
|
|
|
- text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
|
|
|
-}
|
|
|
|
|
|
/* 票 32:生产形态的状态行 —— 再小一点、再淡一点,让位于 3D 场景(状态灯的颜色语义保留)。 */
|
|
|
-.map-holo__status.is-quiet {
|
|
|
- color: rgba(186, 212, 224, 0.5);
|
|
|
- font-size: calc(9.5 * var(--u, 1px));
|
|
|
- text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
|
|
|
-}
|
|
|
-
|
|
|
-.map-holo__status.is-quiet .map-holo__markers {
|
|
|
- border-left-color: rgba(58, 170, 226, 0.2);
|
|
|
-}
|
|
|
|
|
|
/* 票 09:标记数与状态灯同一行;左侧加一条分隔线,免得跟摘要文案连成一串。 */
|
|
|
-.map-holo__markers {
|
|
|
- padding-left: 7px;
|
|
|
- border-left: 1px solid rgba(58, 170, 226, 0.32);
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
|
|
|
/* 状态灯:默认(加载中/待取数)呼吸的橙点;加载完成转绿、失败/快照失效转红。 */
|
|
|
-.map-holo__status i {
|
|
|
- width: calc(7 * var(--u, 1px));
|
|
|
- height: calc(7 * var(--u, 1px));
|
|
|
- border-radius: 50%;
|
|
|
- background: var(--lv2, #ffa63d);
|
|
|
- box-shadow: 0 0 8px var(--lv2, #ffa63d);
|
|
|
- animation: map-breathe 1.8s ease-in-out infinite;
|
|
|
-}
|
|
|
|
|
|
-.map-holo__status i.is-done {
|
|
|
- background: var(--lv4, #35d6a4);
|
|
|
- box-shadow: 0 0 8px var(--lv4, #35d6a4);
|
|
|
-}
|
|
|
-
|
|
|
-.map-holo__status i.is-bad {
|
|
|
- background: var(--lv1, #ff4d5e);
|
|
|
- box-shadow: 0 0 8px var(--lv1, #ff4d5e);
|
|
|
-}
|
|
|
|
|
|
/* 票 46:模式图层计划的降级说明(「设施数据未就绪」等)。与状态灯同一行、小字弱化。 */
|
|
|
-.map-holo__degraded {
|
|
|
- color: var(--lv2, #ffa63d);
|
|
|
- font-size: var(--fs-caption, 10.5px);
|
|
|
- white-space: nowrap;
|
|
|
- padding-left: 7px;
|
|
|
- border-left: 1px solid rgba(255, 166, 61, 0.4);
|
|
|
-}
|
|
|
|
|
|
@keyframes map-breathe {
|
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|