新增数据分析页面；修改路由配置；

src/router/index.js

@@ -5,9 +5,9 @@ import Login from "@/views/Login.vue";
 import Home from "@/views/Home.vue";
 import Main from "@/views/Main.vue";
 import TransitionPage from "@/views/TransitionPage.vue";
-import MainWatch from "@/views/MainWatch.vue"; 
 import StatusMonitoring from "@/views/StatusMonitoring.vue";
 import SpecialSituationMonitoring from "@/views/SpecialSituationMonitoring.vue";
+import DataAnalysis from "@/views/DataAnalysis.vue";
 
 Vue.use(Router);
 
@@ -19,7 +19,7 @@ export default new Router({
     { path: "/main", component: Main },
     { path: "/transition", component: TransitionPage },
     { path: "/home", component: Home },
-    { path: "/watch", component: MainWatch },
+    { path: "/watch", component: DataAnalysis },
     { path: "/surve", component: StatusMonitoring },
     { path: "/security", component: SpecialSituationMonitoring }
   ]

src/views/DataAnalysis.vue

@@ -0,0 +1,306 @@
+<template>
+    <DashboardLayout>
+        <!-- 天气 -->
+        <template #header-left>
+            <WeatherWidget />
+        </template>
+        <!-- 日期 -->
+        <template #header-right>
+            <DateTimeWidget />
+        </template>
+
+        <template #left>
+            <!-- 左侧Tab菜单栏 -->
+            <TechTabs v-model="activeLeftTab" type="underline">
+                <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>
+        </template>
+
+        <template #right>
+
+        </template>
+
+        <template #center>
+            <!-- 地图 -->
+            <TongzhouTrafficMap amapKey="db2da7e3e248c3b2077d53fc809be63f"
+                securityJsCode="a7413c674852c5eaf01d90813c5b7ef6" />
+        </template>
+
+        <template #dialogs>
+            <SmartDialog ref="dialogs" v-for="dialog in activeDialogs" :key="dialog.id" :id="dialog.id" :visible.sync="dialog.visible"
+                :title="dialog.title" :defaultWidth="dialog.width || 400" :defaultHeight="dialog.height || 300"
+                :center="dialog.center !== false" :position="dialog.position" :showClose="dialog.showClose"
+                @close="handleDialogClose(dialog.id)">
+
+                <component :is="dialog.componentName" v-bind="dialog.data"></component>
+            </SmartDialog>
+        </template>
+
+    </DashboardLayout>
+</template>
+
+<script>
+import DashboardLayout from '@/layouts/DashboardLayout.vue';
+import WeatherWidget from '@/components/ui/WeatherWidget.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 SmartDialog from '@/components/ui/SmartDialog.vue';
+import MenuItem from '@/components/ui/MenuItem.vue';
+import TrafficTimeSpace from '@/components/ui/TrafficTimeSpace.vue';
+
+import { makeTrafficTimeSpaceData } from '@/mock/data';
+
+
+export default {
+    name: "HomePage",
+    components: {
+        DashboardLayout,
+        WeatherWidget,
+        DateTimeWidget,
+        TechTabs,
+        TechTabPane,
+        SmartDialog,
+        TongzhouTrafficMap,
+        MenuItem,
+        TrafficTimeSpace
+    },
+    data() {
+        return {
+            // 弹窗相关数据
+            activeDialogs: [],
+            // 左侧边栏数据
+            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: '万盛南街 - 颐瑞东路' }
+                                                ]
+                                            }
+                                        ]
+                                    }
+                                ]
+
+                        }
+                    ]
+                }
+            ]
+        };
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+        handleMenuClick(nodeData) {
+            console.log('父组件接收到了最底层路口点击事件:', nodeData);
+            // 这里可以根据 nodeData 的经纬度来控制地图组件的视角
+            this.testOpenSecurityRoute(nodeData);
+        },
+        openDialog(config) {
+            // 1. 检查这个弹窗是否已经在数组中了
+            const existingDialog = this.activeDialogs.find(
+                d => String(d.id) === String(config.id)
+            );
+
+            if (existingDialog) {
+                existingDialog.visible = true;
+
+                this.$nextTick(() => {
+                    if (this.$refs.dialogs) {
+                        const dialogRefs = Array.isArray(this.$refs.dialogs)
+                            ? this.$refs.dialogs
+                            : [this.$refs.dialogs];
+
+                        const targetComponent = dialogRefs.find(
+                            vm => String(vm.id) === String(config.id)
+                        );
+
+                        if (targetComponent) {
+                            targetComponent.bringToFront();
+                            if (typeof targetComponent.playShake === 'function') {
+                                targetComponent.playShake();
+                            }
+                        } else {
+                            console.warn('没找到对应弹窗:', config.id);
+                        }
+                    }
+                });
+
+                return;
+            }
+
+            // 2. 如果不存在，则 push 一个新的弹窗对象进去
+            this.activeDialogs.push({
+                id: config.id,                     // 唯一标识 (例如路口ID 'node-101')
+                title: config.title,               // 弹窗左上角标题
+                componentName: config.component,   // 要加载的内部组件名
+                visible: true,                     // 默认可见
+                width: config.width || 450,        // 自定义宽度
+                height: config.height || 300,      // 自定义高度
+                center: config.center !== false,   // 是否居中显示
+                position: config.position || null, // 自定义坐标 {x, y}
+                showClose: config.showClose !== false, // 是否显示关闭按钮
+                data: config.data || {}            // 传给内部组件的业务数据
+            });
+
+            window.dispatchEvent(new Event('resize'));
+        },
+
+        /**
+         * 关闭弹窗的回调
+         */
+        handleDialogClose(dialogId) {
+            // 性能优化：当用户点击 ✕ 关闭弹窗时，将其从数组中彻底移除，销毁内部组件释放内存
+            this.activeDialogs = this.activeDialogs.filter(d => d.id !== dialogId);
+        },
+
+        // ================= 测试用例：模拟各种点击行为 =================
+
+        // 模拟 1：打开特勤安保路线面板
+        testOpenSecurityRoute(data) {
+            this.openDialog({
+                id: data.id, // 这里的 ID 可以根据实际业务场景动态生成，例如 'dev-security-route' 代表特勤安保路线弹窗
+                title: data.label,
+                component: 'TrafficTimeSpace',
+                width: 1000,
+                height: 500,
+                center: true,
+                showClose: true,
+                // position: { x: 400, y: 450 },
+                data: makeTrafficTimeSpaceData(),
+            });
+        },
+
+
+
+    }
+}
+</script>
+<style scoped></style>