|
|
@@ -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>
|
