dtScreen/src/components/ui/CrossingPanel.vue

<template>
    <div class="crossing-panel">
        <div class="intersection-video-wrap">
            <IntersectionMapVideos :mapData="intersectionData" :videoUrls="currentRoute.cornerVideos" />
        </div>
        <div class="signal-timing-wrap">
            <SignalTimingChart :cycleLength="cycleLength" :currentTime="currentSec" :phaseData="mockPhaseData" :showScanLine="dataReady" :autoScan="dataReady" @scan-tick="onScanTick" />
        </div>
    </div>
</template>

<script>
import SignalTimingChart from '@/components/ui/SignalTimingChart.vue';
import IntersectionMapVideos from '@/components/ui/IntersectionMapVideos.vue';

import { apiGetCrossingPanelData } from '@/api';

export default {
    name: 'CrossingPanel',
    components: {
        SignalTimingChart,
        IntersectionMapVideos
    },
    props: {

    },
    data() {
        return {
            dataReady: false,
            followPhase: false,
            intersectionData: {},
            currentRoute: {},
            cycleLength: 140,
            currentSec: 15,
            mockPhaseData: []
        }
    },
    async mounted() {
        const nodeId = this.$attrs.id || this.id;
        const data = await apiGetCrossingPanelData(nodeId);
        if (data) {
            this.currentRoute = data.currentRoute || {};
            this.intersectionData = data.intersectionData || {};
            this.mockPhaseData = data.phaseData || [];
            if (data.cycleLength) this.cycleLength = data.cycleLength;
            if (data.currentTime !== undefined) this.currentSec = data.currentTime;
            this.$nextTick(() => { this.dataReady = true; });
        }
    },
    methods: {
        onScanTick(activeTime) {
            if (!this.mockPhaseData || this.mockPhaseData.length === 0) return;
            const phase = this.mockPhaseData.find(p => p[0] === 0 && activeTime >= p[1] && activeTime < p[2]);
            if (!phase) return;

            const type = phase[5];
            const iconValue = phase[6];
            const direction = phase[7];
            const phaseName = phase[3];
            const endTime = phase[2];
            const remaining = Math.max(0, Math.round(endTime - activeTime));

            const nsGreen = (type === 'green' && direction === 'ns');
            const ewGreen = (type === 'green' && direction === 'ew');

            let activeArrowTypes = [];
            if ((nsGreen || ewGreen) && iconValue) {
                const icons = iconValue.split(',');
                icons.forEach(ic => {
                    if (ic.includes('UTURN')) activeArrowTypes.push('U');
                    if (ic.includes('TURN') && !ic.includes('UTURN')) activeArrowTypes.push('L');
                    if (ic.includes('STRAIGHT')) activeArrowTypes.push('S');
                });
                activeArrowTypes = [...new Set(activeArrowTypes)];
            }

            const pedAllRed = !(type === 'green' && (phaseName === 'P1' || phaseName === 'P3'));

            this.$set(this.intersectionData, 'signals', {
                pedAllRed,
                ns: {
                    phaseName: nsGreen ? ({ P1: '南北直行', P2: '南北左转' }[phaseName] || '南北') : (this.intersectionData.signals && this.intersectionData.signals.ns && this.intersectionData.signals.ns.phaseName || '南北'),
                    time: remaining,
                    isGreen: nsGreen,
                    activeArrowTypes: nsGreen ? activeArrowTypes : []
                },
                ew: {
                    phaseName: ewGreen ? ({ P3: '东西直行', P4: '东西左转' }[phaseName] || '东西') : (this.intersectionData.signals && this.intersectionData.signals.ew && this.intersectionData.signals.ew.phaseName || '东西'),
                    time: remaining,
                    isGreen: ewGreen,
                    activeArrowTypes: ewGreen ? activeArrowTypes : []
                }
            });
        }
    }
}
</script>

<style scoped>
.crossing-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; 
    min-height: 0;
}

.intersection-video-wrap {
    width: 100%;
    flex: 2; /* 地图比较重要，分给它 2 份的高度 */
    min-height: 0;
}

.signal-timing-wrap {
    flex: 1; 
    min-height: 0;
    --s: 1;
    width: 100%;
    height: 80px;
    min-width: 0;
    background-color: transparent;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: calc(var(--s) * 10px) 0 0 0;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--s) * 15px);
    color: #e0e6f1;
    flex-shrink: 0;
}

.title-area {
    font-size: calc(var(--s) * 16px);
}

.main-title {
    font-size: calc(var(--s) * 18px);
    font-weight: bold;
    margin-right: calc(var(--s) * 10px);
}

.sub-info {
    font-size: calc(var(--s) * 12px);
    opacity: 0.8;
}

.checkbox-area {
    font-size: calc(var(--s) * 12px);
    display: flex;
    align-items: center;
    cursor: pointer;
    opacity: 0.7;
    user-select: none;
}

.checkbox-area:hover {
    opacity: 1;
}

.checkbox-mock {
    width: calc(var(--s) * 14px);
    height: calc(var(--s) * 14px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-right: calc(var(--s) * 6px);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-mock.is-checked {
    background-color: #4da8ff;
    border-color: #4da8ff;
}

.chart-container {
    width: 100%;
    min-width: 0;
    flex: 1;
    min-height: 80px;
    overflow: hidden;
}

.loading-overlay {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #758599;
    font-size: 14px;
}
</style>