dtScreen/src/views/StatusMonitoring.vue

<template>
    <DashboardLayout ref="layout" layoutClass="special-situation-monitoring">
        <template #header-left>

        </template>
        <template #header-right>
            <!-- 日期 -->
            <DateTimeWidget />
        </template>

        <template #map>
            <!-- 地图 -->
            <TongzhouTrafficMap amapKey="db2da7e3e248c3b2077d53fc809be63f"
                securityJsCode="a7413c674852c5eaf01d90813c5b7ef6" />
        </template>

        <template #left>
            <!-- 左侧Tab菜单栏 -->
            <div class="left-sidebar-wrap">
                <TechTabs v-model="activeLeftTab" type="underline" @tab-click="handleTabClick">
                    <TechTabPane label="总览" name="overview" class="menu-scroll-view">
                        <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
                            @node-click="handleMenuClick" />
                    </TechTabPane>
                    <TechTabPane label="路口" name="crossing" class="menu-scroll-view">
                        <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
                            @node-click="handleMenuClick" />
                    </TechTabPane>
                    <TechTabPane label="干线" name="trunkLine" class="menu-scroll-view">
                        <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
                            @node-click="handleMenuClick">
                        <template #label="{ node }">
                            <span v-if="node.children && node.children.length > 0">{{ node.label }}</span>
                            <span v-else>{{ node.label }} 绿波带</span>
                        </template>
                        </MenuItem>
                    </TechTabPane>
                    <TechTabPane label="特勤" name="specialDuty">
                    </TechTabPane>
                </TechTabs>
            </div>
        </template>

        <template #right>
            <!-- 模式切换按钮组 -->
            <div class="mode-switch" v-if="activeLeftTab === 'crossing'">
                <ButtonGroup v-model="currentView" :options="viewOptions" @select="onViewSelect" />
            </div>
        </template>

        <template #center>

        </template>

    </DashboardLayout>
</template>

<script>
import DashboardLayout from '@/layouts/DashboardLayout.vue';
import DateTimeWidget from '@/components/ui/DateTimeWidget.vue';
import TechTabs from '@/components/ui/TechTabs.vue';
import TechTabPane from '@/components/ui/TechTabPane.vue';
import TongzhouTrafficMap from '@/components/TongzhouTrafficMap.vue';
import MenuItem from '@/components/ui/MenuItem.vue';
import ButtonGroup from '@/components/ui/ButtonGroup.vue';
import { makeTrafficTimeSpaceData } from '@/mock/data';
import testVideo1 from '@/assets/videos/video1.mp4';
import testVideo2 from '@/assets/videos/video2.mp4';
import testImg1 from '@/assets/test_img1.png';


export default {
    name: "HomePage",
    components: {
        DashboardLayout,
        DateTimeWidget,
        TechTabs,
        TechTabPane,
        TongzhouTrafficMap,
        MenuItem,
        ButtonGroup,
    },
    data() {
        return {
            // 左侧边栏数据
            activeLeftTab: 'overview',
            menuData: [
                {
                    id: 'root-1',
                    label: '主控中心',
                    icon: 'el-icon-monitor', // 这里可以替换为你项目用的图标类名，比如 iconfont
                    children: [
                        {
                            id: 'team-1',
                            label: '北京市交警总队',
                            children:
                                [
                                    {
                                        id: 'dist-1',
                                        label: '通州区',
                                        children: [
                                            {
                                                id: 'street-1',
                                                label: '中仓街道',
                                                children: [
                                                    { id: 'node-1', label: '新华东街 - 新华南路' },
                                                    { id: 'node-2', label: '玉带河东街 - 车站路' },
                                                    { id: 'node-3', label: '赵登禹大街 - 新华东街' }
                                                ]
                                            },
                                            {
                                                id: 'street-2',
                                                label: '新华街道',
                                                children: [
                                                    { id: 'node-4', label: '新华南北街交叉口' },
                                                    { id: 'node-5', label: '通胡大街 - 紫运中路' },
                                                    { id: 'node-6', label: '芙蓉东路 - 通胡大街' }
                                                ]
                                            },
                                            {
                                                id: 'street-3',
                                                label: '北苑街道',
                                                children: [
                                                    { id: 'node-7', label: '北苑路口' },
                                                    { id: 'node-8', label: '新华西街 - 北苑南路' },
                                                    { id: 'node-9', label: '新城南街 - 新华西街' }
                                                ]
                                            },
                                            {
                                                id: 'street-4',
                                                label: '玉桥街道',
                                                children: [
                                                    { id: 'node-10', label: '玉桥西路 - 玉桥西里中街' },
                                                    { id: 'node-11', label: '运河西大街 - 玉桥中路' },
                                                    { id: 'node-12', label: '梨园南街 - 运河西大街' }
                                                ]
                                            },
                                            {
                                                id: 'street-5',
                                                label: '杨庄街道',
                                                children: [
                                                    { id: 'node-13', label: '怡乐中街 - 九棵树西路' },
                                                    { id: 'node-14', label: '翠屏西路 - 怡乐中街' },
                                                    { id: 'node-15', label: '杨庄路 - 新华西街' }
                                                ]
                                            },
                                            {
                                                id: 'street-6',
                                                label: '九棵树街道',
                                                children: [
                                                    { id: 'node-16', label: '九棵树东路 - 九棵树西路' },
                                                    { id: 'node-17', label: '云景东路 - 九棵树东路' },
                                                    { id: 'node-18', label: '群芳南街 - 云景东路' }
                                                ]
                                            },
                                            {
                                                id: 'street-7',
                                                label: '临河里街道',
                                                children: [
                                                    { id: 'node-19', label: '梨园中街 - 九棵树东路' },
                                                    { id: 'node-20', label: '临河里路 - 梨园中街' },
                                                    { id: 'node-21', label: '万盛南街 - 临河里路' }
                                                ]
                                            },
                                            {
                                                id: 'street-8',
                                                label: '潞邑街道',
                                                children: [
                                                    { id: 'node-22', label: '潞苑北大街 - 潞邑西路' },
                                                    { id: 'node-23', label: '潞苑南大街 - 潞邑三路' },
                                                    { id: 'node-24', label: '东六环 - 潞苑北大街' }
                                                ]
                                            },
                                            {
                                                id: 'street-9',
                                                label: '通运街道',
                                                children: [
                                                    { id: 'node-25', label: '通胡大街 - 东六环' },
                                                    { id: 'node-26', label: '运河东大街 - 通胡大街' },
                                                    { id: 'node-27', label: '紫运中路 - 运河东大街' }
                                                ]
                                            },
                                            {
                                                id: 'street-10',
                                                label: '潞源街道',
                                                children: [
                                                    { id: 'node-28', label: '宋梁路 - 运河东大街' },
                                                    { id: 'node-29', label: '东六环 - 运河东大街' },
                                                    { id: 'node-30', label: '潞源北街 - 宋梁路' }
                                                ]
                                            },
                                            {
                                                id: 'street-11',
                                                label: '文景街道',
                                                children: [
                                                    { id: 'node-31', label: '环球大道 - 九棵树东路' },
                                                    { id: 'node-32', label: '颐瑞东路 - 环球大道' },
                                                    { id: 'node-33', label: '万盛南街 - 颐瑞东路' }
                                                ]
                                            }
                                        ]
                                    }
                                ]

                        }
                    ]
                }
            ],
            // 地图模式切换数据
            currentView: 'map-mode',
            viewOptions: [
                { label: '列表模式', value: 'list-mode' },
                { label: '地图模式', value: 'map-mode' },
            ]
        };
    },
    watch: {
        // 监听路由参数变化（解决多次从首页点击不同数据跳转过来，页面不刷新的问题）
        '$route.query': {
            handler() {
                this.checkRouteParams();
            },
            deep: true
        }
    },
    created() {

    },
    mounted() {
        // 组件挂载时检查路由
        this.checkRouteParams();

        // 初始显示顶部图表（如果没有路由参数覆盖的话）
        if (Object.keys(this.$route.query).length === 0) {
            this.showTopChartDalogs();
        }

    },
    methods: {
        // 模式切换
        onViewSelect(item) {
            console.log('你点击了：', item.label);
            this.currentView = item.value;
            this.$refs.layout.clearDialogs(); // 清空全部弹窗
            // 列表模式弹窗
            if (this.currentView === 'list-mode') {
                this.$refs.layout.openDialog({
                    id: 'crossing-list', // 这里的 ID 可以根据实际业务场景动态生成
                    title: '',
                    component: 'CrossingListPanel',
                    width: 1920,
                    height: 750,
                    center: false,
                    showClose: true,
                    noPadding: false,
                    enableDblclickExpand: false,
                    position: { x: 100, y: 150 },
                    data: {
                        onViewDetail: (rowData) => this.handleCrossingViewDetail(rowData)
                    }
                });
            } else {
                this.showCrossingTopDialogs();
            }
        },
        // 处理tab点击
        handleTabClick(tabName) {
            console.log('父组件接收到了tab点击事件:', tabName);
            this.$refs.layout.clearDialogs(); // 清空全部弹窗
            this.showTopChartDalogs(); // 根据当前Tab显示对应的顶部常驻图表
        },
        // 处理菜单点击
        handleMenuClick(nodeData) {
            console.log('父组件接收到了最底层路口点击事件:', nodeData);
            // 根据Tab来显示不同的弹窗内容
            if (this.activeLeftTab === 'overview') { // 总览
                this.showOverviewDalogs(nodeData);
            } else if (this.activeLeftTab === 'crossing') { // 路口
                this.showCrossingDalogs(nodeData);
            } else if (this.activeLeftTab === 'trunkLine') { // 干线
                this.showTrunkLineDalogs(nodeData);
            } else if (this.activeLeftTab === 'specialDuty') { // 特勤
                this.showSpecialDutyDalogs(nodeData);
            }

        },
        // 处理弹窗双击展开（通过 onExpand 回调从 Layout 传入）
        handleDoubleClickExpend(nodeData) {
            console.log('处理弹窗双击事件', nodeData);
            if (this.activeLeftTab === 'crossing') {
                this.showCrossingDetailDialogs(nodeData);
            }
        },
        // 显示顶部常驻图表（根据当前Tab状态）
        showTopChartDalogs() {
            if (this.activeLeftTab === 'overview') { // 总览
                this.showOverviewTopDialogs();
            } else if (this.activeLeftTab === 'crossing') { // 路口
                this.showCrossingTopDialogs();
            } else if (this.activeLeftTab === 'trunkLine') { // 干线
                // TODO: 干线Tab的顶部图表
            } else if (this.activeLeftTab === 'specialDuty') { // 特勤
                this.openDutyDetailDialog();
            }
        },
        // 显示总览弹窗组
        showOverviewDalogs(nodeData) {
            console.log('显示总览弹窗组', nodeData.id, nodeData.label);
            this.showCrossingDetailDialogs(nodeData);
        },
        showOverviewTopDialogs() {
            this.$refs.layout.openDialog({
                id: 'top-chart-overview-1',
                title: '',
                component: 'OnlineStatusTabs',
                width: 300,
                height: 160,
                center: false,
                showClose: false,
                draggable: false,
                resizable: false,
                position: { x: 630, y: 130 },
                noPadding: true,
                data: {}
            });
            this.$refs.layout.openDialog({
                id: 'top-chart-overview-2',
                title: '',
                component: 'DeviceStatusTabs',
                width: 300,
                height: 160,
                center: false,
                showClose: false,
                draggable: false,
                resizable: false,
                position: { x: 980, y: 130 },
                noPadding: true,
                data: {}
            });
        },
        // 显示路口弹窗组
        showCrossingDalogs(nodeData) {
            console.log('显示路口弹窗组', nodeData.id, nodeData.label);

            // 路口弹窗
            // this.$refs.layout.openDialog({
            //     id: 'crossing3_' + nodeData.id, // 这里的 ID 可以根据实际业务场景动态生成
            //     title: nodeData.label,
            //     component: 'CrossingPanel',
            //     width: 260,
            //     height: 260,
            //     center: false,
            //     showClose: true,
            //     position: { x: 950, y: 430 },
            //     noPadding: false,
            //     data: {
            //         ...nodeData,
            //         onExpand: (data) => this.handleDoubleClickExpend(data)
            //     },
            //     onClose: () => {
            //         this.$refs.layout.handleDialogClose('top-chart-crossing-1');
            //         this.$refs.layout.handleDialogClose('top-chart-crossing-2');
            //     }
            // });

            this.showCrossingDetailDialogs(nodeData);


        },

        showCrossingDetailDialogs(nodeData) {
            console.log('显示干线弹窗组', nodeData.id, nodeData.label);
            this.$refs.layout.openDialog({
                id: 'crossing_detail' + nodeData.id, // 这里的 ID 可以根据实际业务场景动态生成，例如 'dev-security-route' 代表特勤安保路线弹窗
                title: nodeData.label || nodeData.name,
                component: 'CrossingDetailPanel',
                width: 1315,
                height: 682,
                center: false,
                showClose: true,
                position: { x: 500, y: 170 },
                noPadding: false,
                enableDblclickExpand: false,
                data: nodeData
            });
        },
        showCrossingTopDialogs() {
            this.$refs.layout.openDialog({
                id: 'top-chart-crossing-1',
                title: '',
                component: 'RingDonutChart',
                width: 228,
                height: 124,
                center: false,
                showClose: false,
                draggable: false,
                resizable: false,
                position: { x: 730, y: 130 },
                noPadding: true,
                data: {
                    chartData: [
                        { name: '在线', value: 38, color: '#4DF5F8' },
                        { name: '离线', value: 3, color: '#FFD369' }
                    ],
                    centerTitle: "98%",
                    centerSubTitle: "38/41"
                }
            });

            this.$refs.layout.openDialog({
                id: 'top-chart-crossing-2',
                title: '',
                component: 'RingDonutChart',
                width: 228,
                height: 124,
                center: false,
                showClose: false,
                draggable: false,
                resizable: false,
                position: { x: 980, y: 130 },
                noPadding: true,
                data: {
                    chartData: [
                        { name: '通信', value: 10, color: '#4DF5F8' },
                        { name: '检测器', value: 8, color: '#FFA033' },
                        { name: '灯控', value: 15, color: '#FFF587' },
                        { name: '冲突', value: 5, color: '#FF4D4F' }
                    ],
                    centerTitle: "98%",
                    centerSubTitle: "38/41"
                }
            });
        },
        // 路口列表模式下弹窗
        handleCrossingViewDetail(rowData) {
            console.log('显示路口列表查看', rowData);
            this.showCrossingDetailDialogs(rowData);
        },
        // 显示干线弹窗组
        showTrunkLineDalogs(nodeData) {
            console.log('显示干线弹窗组', nodeData.id, nodeData.label);

            this.$refs.layout.openDialog({
                id: nodeData.id, // 这里的 ID 可以根据实际业务场景动态生成，例如 'dev-security-route' 代表特勤安保路线弹窗
                title: nodeData.label,
                component: 'TrafficTimeSpace',
                width: 1000,
                height: 500,
                center: true,
                showClose: true,
                // position: { x: 400, y: 450 },
                data: makeTrafficTimeSpaceData(),
            });
        },
        // 显示特勤弹窗组
        showSpecialDutyDalogs(nodeData) {
            console.log('显示干线弹窗组', nodeData.id, nodeData.label);
        },
        // === 解析路由参数并执行对应操作 ===
        checkRouteParams() {
            // 统一参数接收：特勤接收 id，路口接收 intersectionName 和 plan
            const { tab, action, id, } = this.$route.query;

            if (!tab) return; // 如果没有传递 tab 参数，说明是正常访问，不处理

            // 1. 处理“特勤线路”跳转
            if (tab === 'specialDuty') {
                this.activeLeftTab = 'specialDuty'; // 切换到左侧【特勤】Tab
                this.handleTabClick('specialDuty'); // 手动触发 Tab 切换事件，更新顶部图表

                // 这里判断的条件改为 id
                if (action === 'open-dialog' && id) {
                    this.$nextTick(() => {
                        this.openDutyDetailDialog(id); // 打开特勤弹窗
                    });
                }
            }

            // 2. 处理“关键路口”跳转
            else if (tab === 'crossing') {
                this.activeLeftTab = 'crossing'; // 切换到左侧【路口】Tab
                this.handleTabClick('crossing'); // 手动触发 Tab 切换事件，更新顶部图表

                if (action === 'open-dialog') {
                    this.$nextTick(() => {
                        // 构造一个假的 nodeData 传给详情弹窗方法
                        this.showCrossingDetailDialogs({
                            id: 'route_' + new Date().getTime(), // 动态生成一个ID防重复
                            label: '路口详情',
                        });
                    });
                }
            }
        },

        // === 特勤详情弹窗 (你需要根据实际组件名替换) ===
        async openDutyDetailDialog(dutyId) {
            console.log('准备打开特勤线路详情，ID：', dutyId);
            // 1. 获取数据
            const panelData = await this.fetchSpecialTaskData();

            // 2. 呼出弹窗
            this.$refs.layout.openDialog({
                id: 'special-task-dialog',
                title: ' ', // 留空以隐藏默认标题，使用自定义 Header
                width: 1400, // 弹窗宽一点，容纳 3 列
                height: 700,
                center: false,
                showClose: false,
                noPadding: true, // 去除默认内边距，让内部组件自己控制
                position: {x: 200, y: 150},
                // 挂载主体组件和数据
                component: 'SpecialTaskMonitorPanel',
                data: { panelData: panelData },

                // 挂载自定义 Header 和数据
                headerComponent: 'TaskMonitorHeader',
                headerProps: {
                    taskData: panelData.taskInfo,
                    onEndTask: () => {
                        console.log('点击了结束任务');
                        this.$refs.layout.handleDialogClose('special-task-dialog');
                    }
                }
            });
        },

        // 模拟从后端拉取数据
        async fetchSpecialTaskData() {
            // 模拟 API 请求延迟
            await new Promise(resolve => setTimeout(resolve, 500));

            // 这是后端返回的完整数据结构
            return {
                // 1. 头部任务信息
                taskInfo: {
                    name: '北京路演唱会特勤路线',
                    time: '12:00-14:00',
                    manager: '张飞',
                    level: '一级',
                    status: '进行中',
                    statusColor: '#ff4d4f' // 红色状态灯
                },
                // 2. 视频流列表 (支持有源和无源)
                videos: [
                    { id: 1, url: testVideo1 }, // 有视频
                    { id: 2, url: testVideo2 }, // 无视频，展示占位
                    { id: 3, url: testVideo1 },
                    { id: 4, url: testVideo2 } // 第4个，用于测试轮播翻页
                ],
                // 3. 路口控制卡片列表
                intersections: [
                    {
                        id: 'INT_01',
                        name: '京原路与北宫路交叉口1',
                        statusColor: '#ffaa00', // 黄色状态灯
                        stage: 3,
                        mode: '步进',
                        timeLeft: 30,
                        btnText: '立即解锁',
                        btnType: 'normal',
                        phases: [
                            { id: 1, icon: '↑', img: testImg1, active: false },
                            { id: 2, icon: '↰', img: testImg1, active: false },
                            { id: 3, icon: '↑', img: testImg1, active: true }, // 当前激活相位
                            { id: 4, icon: '↰', img: testImg1, active: false }
                        ],
                        // 传给你原有的 IntersectionMapVideos 组件的数据
                        mapData: {
                            armsConfig: {
                                N: { lanes: ['L', 'S', 'R'], cameraType: 1 },
                                S: { lanes: ['L', 'S', 'R'], cameraType: 1 },
                                E: { lanes: ['L', 'S', 'R'], cameraType: 2 },
                                W: { lanes: ['L', 'S', 'R'], cameraType: 2 }
                            },
                            signals: {
                                ns: { isGreen: true, time: 30, phaseName: '南北直行' },
                                ew: { isGreen: false, time: 45, phaseName: '东西直行' }
                            }
                        },
                        videoUrls: {
                            nw: testVideo1,
                            ne: testVideo2,
                            sw: testVideo1,
                            se: testVideo2
                        }
                    },
                    // 为了演示，这里复制上面的数据作为第2、3、4个路口
                    ...Array.from({ length: 3 }).map((_, i) => ({
                        id: `INT_0${i + 2}`,
                        name: `京原路与北宫路交叉口${i + 2}`,
                        statusColor: '#00e5ff',
                        stage: 2, mode: '系统', timeLeft: 15,
                        btnText: '立即执行', btnType: 'primary',
                        phases: [
                            { id: 1, icon: '↑', img: testImg1, active: true },
                            { id: 2, icon: '↰', img: testImg1, active: false },
                            { id: 3, icon: '↑', img: testImg1, active: false },
                            { id: 4, icon: '↰', img: testImg1, active: false }
                        ],
                        mapData: {
                            armsConfig: {
                                N: { lanes: ['L', 'S', 'R'], cameraType: 1 },
                                S: { lanes: ['L', 'S', 'R'], cameraType: 1 },
                                E: { lanes: ['L', 'S', 'R'], cameraType: 2 },
                                W: { lanes: ['L', 'S', 'R'], cameraType: 2 }
                            },
                            signals: {
                                ns: { isGreen: true, time: 30, phaseName: '南北直行' },
                                ew: { isGreen: false, time: 45, phaseName: '东西直行' }
                            }
                        },
                        videoUrls: {
                            nw: testVideo1,
                            ne: testVideo2,
                            sw: testVideo2,
                            se: testVideo1
                        }
                    }))
                ]
            };
        },

    }
}
</script>
<style scoped>
.mode-switch {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.mode-switch>div {
    width: 200px;
}
</style>