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" />
                    </TechTabPane>
                    <TechTabPane label="特勤" name="specialDuty" class="menu-scroll-view">
                        <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
                            @node-click="handleMenuClick" />
                    </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';


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' },
            ]
        };
    },
    created() {

    },
    mounted() {
        this.showTopChartDalogs();
        // this.$refs.layout.openDialog({
        //         id: 'test', // 这里的 ID 可以根据实际业务场景动态生成，例如 'dev-security-route' 代表特勤安保路线弹窗
        //         title: 'dddd',
        //         component: 'CrossingListPanel',
        //         width: 1315,
        //         height: 682,
        //         center: true,
        //         showClose: true,
        //         // position: { x: 750, y: 130 },
        //         noPadding: false,
        //         enableDblclickExpand: false,
        //         data: {}
        //     });
    },
    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: 1720,
                    height: 682,
                    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') { // 特勤
                // TODO: 特勤Tab的顶部图表
            }
        },
        // 显示总览弹窗组
        showOverviewDalogs(nodeData) {
            console.log('显示总览弹窗组', nodeData.id, nodeData.label);
        },
        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');
                }
            });


        },

        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: true,
                showClose: true,
                // position: { x: 750, y: 130 },
                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);
        },

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

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