|
|
@@ -1,128 +1,229 @@
|
|
|
<template>
|
|
|
- <div class="fluid-dashboard">
|
|
|
- <div id="map-container" class="map-layer"></div>
|
|
|
+ <DashboardLayout>
|
|
|
+ <!-- 天气 -->
|
|
|
+ <template #header-left>
|
|
|
+ <WeatherWidget />
|
|
|
+ </template>
|
|
|
+ <!-- 日期 -->
|
|
|
+ <template #header-right>
|
|
|
+ <DateTimeWidget />
|
|
|
+ </template>
|
|
|
|
|
|
- <div class="ui-layer">
|
|
|
+ <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">
|
|
|
+ <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
|
|
|
+ @node-click="handleMenuClick" />
|
|
|
+ </TechTabPane>
|
|
|
+ <TechTabPane label="特勤" name="specialDuty">
|
|
|
+ <MenuItem v-for="item in menuData" :key="item.id" :node="item" :level="0"
|
|
|
+ @node-click="handleMenuClick" />
|
|
|
+ </TechTabPane>
|
|
|
+ </TechTabs>
|
|
|
+ </template>
|
|
|
|
|
|
- <header class="top-header">
|
|
|
- <div class="right-wrap">
|
|
|
- <span class="weather">{{ weather }}</span>
|
|
|
- <span class="temperature">{{ temperature }}</span>
|
|
|
- <span class="time">{{ time }}</span>
|
|
|
- <div class="date">
|
|
|
- <span>{{ week }}</span>
|
|
|
- <span>{{ date }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </header>
|
|
|
+ <template #right>
|
|
|
|
|
|
- <main class="main-layout">
|
|
|
- <!-- 左侧边栏 -->
|
|
|
- <aside class="left-sidebar">
|
|
|
- <div>组织机构</div>
|
|
|
- <SidebarMenu @leaf-node-click="handleLeafNodeClick" />
|
|
|
- </aside>
|
|
|
+ </template>
|
|
|
|
|
|
- <section class="center-area">
|
|
|
- <div class="top-center-controls">
|
|
|
- <ButtonGroup @change="handleModeChange" />
|
|
|
- </div>
|
|
|
+ <template #center>
|
|
|
+ <!-- 地图 -->
|
|
|
+ <TongzhouTrafficMap amapKey="db2da7e3e248c3b2077d53fc809be63f"
|
|
|
+ securityJsCode="a7413c674852c5eaf01d90813c5b7ef6" />
|
|
|
+ </template>
|
|
|
|
|
|
- <div class="float-bottom-dock">
|
|
|
- <BottomDock @change="handleDockChange" />
|
|
|
- </div>
|
|
|
+ <template #dialogs>
|
|
|
+ <SmartDialog 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)">
|
|
|
|
|
|
- </section>
|
|
|
+ <component :is="dialog.componentName" v-bind="dialog.data"></component>
|
|
|
+ </SmartDialog>
|
|
|
+ </template>
|
|
|
|
|
|
- <aside class="right-sidebar">
|
|
|
- <MapLegend style="position: absolute; right: 20px; bottom: 80px; z-index: 100;" />
|
|
|
- </aside>
|
|
|
-
|
|
|
- </main>
|
|
|
-
|
|
|
- </div>
|
|
|
- <SmartDialog 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>
|
|
|
- <AlarmPopup
|
|
|
- style="position: absolute; bottom: 30%; right: 30%;"
|
|
|
- title="降级黄闪"
|
|
|
- intersection="长安街与王府井路口"
|
|
|
- time="2026.03.14 10:30"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ </DashboardLayout>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import '@/styles/global.css';
|
|
|
-import '@/utils/rem.js';
|
|
|
-
|
|
|
-import SidebarMenu from '@/components/ui/SidebarMenu.vue';
|
|
|
-import ButtonGroup from '@/components/ui/ButtonGroup.vue';
|
|
|
-import BottomDock from '@/components/ui/BottomDock.vue';
|
|
|
+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 AlarmPopup from '@/components/ui/AlarmPopup.vue';
|
|
|
import DeviceStatusPanel from '@/components/ui/DeviceStatusPanel.vue';
|
|
|
import SecurityRoutePanel from '@/components/ui/SecurityRoutePanel.vue';
|
|
|
import IntersectionMapVideos from '@/components/ui/IntersectionMapVideos.vue';
|
|
|
import TrafficTimeSpace from '@/components/ui/TrafficTimeSpace.vue';
|
|
|
-import MapLegend from '@/components/ui/MapLegend.vue';
|
|
|
+import MenuItem from '@/components/ui/MenuItem.vue';
|
|
|
import { getIntersectionData, makeTrafficTimeSpaceData } from '@/mock/data';
|
|
|
|
|
|
+
|
|
|
export default {
|
|
|
- name: 'StatusMonitoring',
|
|
|
+ name: "HomePage",
|
|
|
components: {
|
|
|
- SidebarMenu,
|
|
|
- ButtonGroup,
|
|
|
- BottomDock,
|
|
|
+ DashboardLayout,
|
|
|
+ WeatherWidget,
|
|
|
+ DateTimeWidget,
|
|
|
+ TechTabs,
|
|
|
+ TechTabPane,
|
|
|
SmartDialog,
|
|
|
- AlarmPopup,
|
|
|
+ TongzhouTrafficMap,
|
|
|
+ MenuItem,
|
|
|
DeviceStatusPanel,
|
|
|
SecurityRoutePanel,
|
|
|
IntersectionMapVideos,
|
|
|
- TrafficTimeSpace,
|
|
|
- MapLegend,
|
|
|
+ TrafficTimeSpace
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- weather: '☀️ 晴',
|
|
|
- temperature: '32/17℃',
|
|
|
- time: '10:30:05',
|
|
|
- week: '周五',
|
|
|
- date: '2023.08.10',
|
|
|
- currentModule: '干线协调',
|
|
|
+ // 弹窗相关数据
|
|
|
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: '万盛南街 - 颐瑞东路' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
- methods: {
|
|
|
- handleModeChange(val) {
|
|
|
- console.log('当前切换到了模式:', val);
|
|
|
+ created() {
|
|
|
|
|
|
- },
|
|
|
- handleDockChange(item) {
|
|
|
- console.log('父组件接收到了 Dock 切换事件:', item.label);
|
|
|
- this.currentModule = item.label;
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
|
|
|
- // 在这里执行你具体的业务逻辑联动
|
|
|
- if (item.label === '首页') {
|
|
|
- // 重置地图视角
|
|
|
- } else if (item.label === '特勤安保') {
|
|
|
- // 画出安保路线，弹出视频监控框
|
|
|
- } else if (item.label === '系统设置') {
|
|
|
- // 弹出一个全屏的设置弹窗
|
|
|
- }
|
|
|
- },
|
|
|
- handleLeafNodeClick(nodeData) {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleMenuClick(nodeData) {
|
|
|
console.log('父组件接收到了最底层路口点击事件:', nodeData);
|
|
|
// 这里可以根据 nodeData 的经纬度来控制地图组件的视角
|
|
|
this.testOpenDeviceStatus();
|
|
|
@@ -253,8 +354,8 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
-<style scoped></style>
|
|
|
+<style scoped></style>
|
