|
|
@@ -2,7 +2,7 @@
|
|
|
<DashboardLayout ref="layout">
|
|
|
<!-- 天气 -->
|
|
|
<template #header-left>
|
|
|
- <WeatherWidget />
|
|
|
+
|
|
|
</template>
|
|
|
<!-- 日期 -->
|
|
|
<template #header-right>
|
|
|
@@ -11,49 +11,148 @@
|
|
|
|
|
|
<!-- 地图 -->
|
|
|
<template #map>
|
|
|
- <TongzhouTrafficMap
|
|
|
- amapKey="db2da7e3e248c3b2077d53fc809be63f"
|
|
|
- securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
|
|
|
- :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
|
|
|
- @map-crossing-click="handleMapCrossingClick"
|
|
|
- />
|
|
|
+ <TongzhouTrafficMap amapKey="db2da7e3e248c3b2077d53fc809be63f"
|
|
|
+ securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
|
|
|
+ :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
|
|
|
+ @map-crossing-click="handleMapCrossingClick" />
|
|
|
</template>
|
|
|
|
|
|
<template #left>
|
|
|
<!-- 左侧Tab菜单栏 -->
|
|
|
<div class="left-sidebar-wrap">
|
|
|
<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 label="总览" name="overview" >
|
|
|
+
|
|
|
+ <div class="panel-list">
|
|
|
+ <div class="panel-item test_1_1">
|
|
|
+ <PanelContainer title="北京xxx路网拥堵监测">
|
|
|
+ <div class="test_img">
|
|
|
+ <img src="@/assets/images/test/1_1.png" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </PanelContainer>
|
|
|
+ </div>
|
|
|
+ <div class="panel-item test_1_3">
|
|
|
+ <PanelContainer title="交通拥堵报警">
|
|
|
+ <div class="test_img">
|
|
|
+ <img src="@/assets/images/test/1_3.png" />
|
|
|
+ </div>
|
|
|
+ </PanelContainer>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
</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 label="评价监测" name="evaluation" >
|
|
|
+ <TechTabs v-model="activeTab" type="segmented" @tab-click="handleTabClick">
|
|
|
+ <TechTabPane label="单点" name="singlePoint">
|
|
|
+ <div class="panel-list">
|
|
|
+ <div class="panel-item test_2_1">
|
|
|
+ <PanelContainer title="运行状态指标">
|
|
|
+ <div class="test_img">
|
|
|
+ <img src="@/assets/images/test/2_1.png" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </PanelContainer>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </TechTabPane>
|
|
|
+ <TechTabPane label="干线" name="trunkLine">
|
|
|
+ <div class="panel-list">
|
|
|
+ <div class="panel-item test_3_1">
|
|
|
+ <PanelContainer title="通行状态指标">
|
|
|
+ <div class="test_img">
|
|
|
+ <img src="@/assets/images/test/3_1.png" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </PanelContainer>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </TechTabPane>
|
|
|
+ <TechTabPane label="区域" name="area">
|
|
|
+ <div class="panel-list">
|
|
|
+ <div class="panel-item test_4_1">
|
|
|
+ <PanelContainer title="运行状态指标">
|
|
|
+ <div class="test_img">
|
|
|
+ <img src="@/assets/images/test/4_1.png" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </PanelContainer>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </TechTabPane>
|
|
|
+ </TechTabs>
|
|
|
+
|
|
|
</TechTabPane>
|
|
|
- <TechTabPane label="干线" name="trunkLine" class="menu-scroll-view">
|
|
|
- <MenuItem v-for="item in trunkLineMenuData" :key="item.id" :node="item" :level="0"
|
|
|
- @node-click="handleMenuClick">
|
|
|
- <template #label="{ node }">
|
|
|
- <span v-if="node.children && node.children.length > 0">{{ node.label }}</span>
|
|
|
- <span v-else>{{ node.label }} 绿波带</span>
|
|
|
- </template>
|
|
|
- </MenuItem>
|
|
|
+ <TechTabPane label="智能诊断" name="diagnosis" >
|
|
|
+
|
|
|
</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 label="方案优化" name="optimization" >
|
|
|
+
|
|
|
</TechTabPane>
|
|
|
</TechTabs>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template #right>
|
|
|
+ <!-- 总览 -->
|
|
|
+ <div class="panel-list" v-if="activeLeftTab === 'overview'">
|
|
|
+ <div class="panel-item test_1_2">
|
|
|
+ <PanelContainer title="北京各子区拥堵指数排行">
|
|
|
+ <div class="test_img">
|
|
|
+ <img src="@/assets/images/test/1_2.png" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </PanelContainer>
|
|
|
+ </div>
|
|
|
+ <div class="panel-item test_1_4">
|
|
|
+ <PanelContainer title="AI交通诊断">
|
|
|
+ <div class="test_img">
|
|
|
+ <img src="@/assets/images/test/1_4.png" />
|
|
|
+ </div>
|
|
|
+ </PanelContainer>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 评价监测 -->
|
|
|
+ <div class="panel-list" v-if="activeLeftTab === 'evaluation' && activeTab === 'singlePoint'">
|
|
|
+ <div class="panel-item test_2_2">
|
|
|
+ <PanelContainer title="控制效益指标">
|
|
|
+ <div class="test_img">
|
|
|
+ <img src="@/assets/images/test/2_2.png" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </PanelContainer>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel-list" v-if="activeLeftTab === 'evaluation' && activeTab === 'trunkLine'">
|
|
|
+ <div class="panel-item test_3_2">
|
|
|
+ <PanelContainer title="控制效益指标">
|
|
|
+ <div class="test_img">
|
|
|
+ <img src="@/assets/images/test/3_2.png" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </PanelContainer>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel-list" v-if="activeLeftTab === 'evaluation' && activeTab === 'area'">
|
|
|
+ <div class="panel-item test_4_2">
|
|
|
+ <PanelContainer title="控制效益指标">
|
|
|
+ <div class="test_img">
|
|
|
+ <img src="@/assets/images/test/4_2.png" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </PanelContainer>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<template #center>
|
|
|
-
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
</DashboardLayout>
|
|
|
@@ -61,172 +160,46 @@
|
|
|
|
|
|
<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 MenuItem from '@/components/ui/MenuItem.vue';
|
|
|
+import PanelContainer from '@/components/ui/PanelContainer.vue';
|
|
|
|
|
|
-import { apiGetTongzhouMenuTree, apiGetTrunkLineMenuTree, apiGetTrafficTimeSpace } from '@/api';
|
|
|
+import { apiGetTongzhouMenuTree, } from '@/api';
|
|
|
|
|
|
|
|
|
export default {
|
|
|
name: "HomePage",
|
|
|
components: {
|
|
|
DashboardLayout,
|
|
|
- WeatherWidget,
|
|
|
DateTimeWidget,
|
|
|
TechTabs,
|
|
|
TechTabPane,
|
|
|
+ PanelContainer,
|
|
|
TongzhouTrafficMap,
|
|
|
- MenuItem,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
// 左侧边栏数据
|
|
|
activeLeftTab: 'overview',
|
|
|
- trunkLineMenuData: [],
|
|
|
- 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: '万盛南街 - 颐瑞东路' }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
-
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
+ activeTab: 'singlePoint',
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
|
|
|
},
|
|
|
async mounted() {
|
|
|
- const [menuData, trunkData] = await Promise.all([
|
|
|
+ await Promise.all([
|
|
|
apiGetTongzhouMenuTree(),
|
|
|
- apiGetTrunkLineMenuTree(),
|
|
|
]);
|
|
|
- this.menuData = menuData || [];
|
|
|
- this.trunkLineMenuData = trunkData || [];
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
- handleMenuClick(nodeData) {
|
|
|
- console.log('父组件接收到了最底层路口点击事件:', nodeData);
|
|
|
- // 这里可以根据 nodeData 的经纬度来控制地图组件的视角
|
|
|
- this.testOpenSecurityRoute(nodeData);
|
|
|
+ handleTabClick(selectedTabName) {
|
|
|
+ if (this.statusData && this.statusData[selectedTabName]) {
|
|
|
+ this.displayData = this.statusData[selectedTabName];
|
|
|
+ }
|
|
|
},
|
|
|
// 处理地图点击事件
|
|
|
handleMapCrossingClick(mapData, lnglat) {
|
|
|
@@ -238,35 +211,76 @@ export default {
|
|
|
}
|
|
|
console.log(nodeData);
|
|
|
if (this.activeLeftTab === 'overview') { // 总览
|
|
|
- this.testOpenSecurityRoute(nodeData);
|
|
|
+
|
|
|
} else if (this.activeLeftTab === 'crossing') { // 路口
|
|
|
- this.testOpenSecurityRoute(nodeData);
|
|
|
+
|
|
|
} else if (this.activeLeftTab === 'trunkLine') { // 干线
|
|
|
- this.testOpenSecurityRoute(nodeData);
|
|
|
+
|
|
|
} else if (this.activeLeftTab === 'specialDuty') { // 特勤
|
|
|
- this.testOpenSecurityRoute(nodeData);
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
- // ================= 测试用例：模拟各种点击行为 =================
|
|
|
-
|
|
|
- // 模拟 1：打开特勤安保路线面板
|
|
|
- async testOpenSecurityRoute(data) {
|
|
|
- const tsData = await apiGetTrafficTimeSpace();
|
|
|
- this.$refs.layout.openDialog({
|
|
|
- id: data.id,
|
|
|
- title: data.label,
|
|
|
- component: 'TrafficTimeSpace',
|
|
|
- width: 1000,
|
|
|
- height: 500,
|
|
|
- center: true,
|
|
|
- showClose: true,
|
|
|
- data: tsData,
|
|
|
- });
|
|
|
- },
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-<style scoped></style>
|
|
|
+<style scoped>
|
|
|
+.panel-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.panel-item {
|
|
|
+ height: 254px;
|
|
|
+}
|
|
|
+
|
|
|
+.test_img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.test_img img {
|
|
|
+ width: 100%;
|
|
|
+ /* height: 100%; */
|
|
|
+ object-fit: contain;
|
|
|
+}
|
|
|
+
|
|
|
+.test_1_1 {
|
|
|
+ height: 577px;
|
|
|
+}
|
|
|
+
|
|
|
+.test_1_3 {
|
|
|
+ height: 276px;
|
|
|
+}
|
|
|
+
|
|
|
+.test_1_2 {
|
|
|
+ height: 577px;
|
|
|
+}
|
|
|
+
|
|
|
+.test_1_4 {
|
|
|
+ height: 276px;
|
|
|
+}
|
|
|
+
|
|
|
+.test_2_1,
|
|
|
+.test_2_2,
|
|
|
+.test_3_1,
|
|
|
+.test_3_2,
|
|
|
+.test_4_1,
|
|
|
+.test_4_2 {
|
|
|
+ height: 936px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .tabs-content {
|
|
|
+ background: #112446;
|
|
|
+ /* background-color: transparent; */
|
|
|
+}
|
|
|
+::v-deep .tech-tab-pane {
|
|
|
+ /* background-color: #153161; */
|
|
|
+}
|
|
|
+::v-deep .test_1_1 .panel-content {
|
|
|
+ /* background: none; */
|
|
|
+}
|
|
|
+</style>
|
