|
|
@@ -1,121 +1,229 @@
|
|
|
<template>
|
|
|
- <div class="fluid-dashboard">
|
|
|
- <div id="map-container" class="map-layer"></div>
|
|
|
-
|
|
|
- <div class="ui-layer">
|
|
|
-
|
|
|
- <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>
|
|
|
-
|
|
|
- <main class="main-layout special-situation-monitoring">
|
|
|
- <!-- 左侧边栏 -->
|
|
|
- <aside class="left-sidebar">
|
|
|
- <SecurityTaskTable @view-detail="handleViewDetail" />
|
|
|
- </aside>
|
|
|
-
|
|
|
- <section class="center-area">
|
|
|
- <div class="top-center-controls">
|
|
|
- <ButtonGroup @change="handleModeChange" />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="float-bottom-dock">
|
|
|
- <BottomDock @change="handleDockChange" />
|
|
|
- </div>
|
|
|
-
|
|
|
- </section>
|
|
|
-
|
|
|
- <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" @close-dialog="handleDialogClose(dialog.id)"></component>
|
|
|
- </SmartDialog>
|
|
|
-
|
|
|
- </div>
|
|
|
+ <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 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 '@/styles/global.css';
|
|
|
-import '@/utils/rem.js';
|
|
|
-
|
|
|
-import SecurityTaskTable from '@/components/ui/SecurityTaskTable.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 MenuItem from '@/components/ui/MenuItem.vue';
|
|
|
import SecurityRoutePanelSwitch from '@/components/ui/SecurityRoutePanelSwitch.vue';
|
|
|
import SecurityRoutePanelSwitchSmall from '@/components/ui/SecurityRoutePanelSwitchSmall.vue';
|
|
|
-import MapLegend from '@/components/ui/MapLegend.vue';
|
|
|
|
|
|
|
|
|
export default {
|
|
|
- name: 'StatusMonitoring',
|
|
|
+ name: "HomePage",
|
|
|
components: {
|
|
|
- SecurityTaskTable,
|
|
|
- ButtonGroup,
|
|
|
- BottomDock,
|
|
|
+ DashboardLayout,
|
|
|
+ WeatherWidget,
|
|
|
+ DateTimeWidget,
|
|
|
+ TechTabs,
|
|
|
+ TechTabPane,
|
|
|
SmartDialog,
|
|
|
+ TongzhouTrafficMap,
|
|
|
+ MenuItem,
|
|
|
SecurityRoutePanelSwitch,
|
|
|
- SecurityRoutePanelSwitchSmall,
|
|
|
- MapLegend
|
|
|
+ SecurityRoutePanelSwitchSmall
|
|
|
},
|
|
|
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: '万盛南街 - 颐瑞东路' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
methods: {
|
|
|
- handleViewDetail() {
|
|
|
- console.log('父组件接收到了查看详情事件');
|
|
|
- // 这里可以根据实际业务需求来决定打开哪个弹窗，加载哪个组件
|
|
|
+ handleMenuClick(nodeData) {
|
|
|
+ console.log('父组件接收到了最底层路口点击事件:', nodeData);
|
|
|
+ // 这里可以根据 nodeData 的经纬度来控制地图组件的视角
|
|
|
this.testOpenSecurityRoute();
|
|
|
this.testOpenSecurityRoute2();
|
|
|
},
|
|
|
- handleModeChange(val) {
|
|
|
- console.log('当前切换到了模式:', val);
|
|
|
-
|
|
|
- },
|
|
|
- handleDockChange(item) {
|
|
|
- console.log('父组件接收到了 Dock 切换事件:', item.label);
|
|
|
- this.currentModule = item.label;
|
|
|
-
|
|
|
- // 在这里执行你具体的业务逻辑联动
|
|
|
- if (item.label === '首页') {
|
|
|
- // 重置地图视角
|
|
|
- } else if (item.label === '特勤安保') {
|
|
|
- // 画出安保路线，弹出视频监控框
|
|
|
- } else if (item.label === '系统设置') {
|
|
|
- // 弹出一个全屏的设置弹窗
|
|
|
- }
|
|
|
- },
|
|
|
openDialog(config) {
|
|
|
// 1. 防止重复打开同一个弹窗 (根据 id 判断)
|
|
|
const existingDialog = this.activeDialogs.find(d => d.id === config.id);
|
|
|
@@ -139,6 +247,8 @@ export default {
|
|
|
showClose: config.showClose !== false, // 是否显示关闭按钮
|
|
|
data: config.data || {} // 传给内部组件的业务数据
|
|
|
});
|
|
|
+
|
|
|
+ window.dispatchEvent(new Event('resize'));
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
@@ -177,9 +287,7 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
-<style scoped></style>
|
|
|
+<style scoped></style>
|
