|
|
@@ -1,54 +1,101 @@
|
|
|
<template>
|
|
|
- <DashboardLayout ref="layout">
|
|
|
- <!-- 天气 -->
|
|
|
+ <DashboardLayout ref="layout" layoutClass="special-situation-monitoring">
|
|
|
<template #header-left>
|
|
|
- <WeatherWidget />
|
|
|
+
|
|
|
</template>
|
|
|
- <!-- 日期 -->
|
|
|
<template #header-right>
|
|
|
+ <!-- 日期 -->
|
|
|
<DateTimeWidget />
|
|
|
</template>
|
|
|
|
|
|
- <!-- 地图 -->
|
|
|
<template #map>
|
|
|
- <TongzhouTrafficMap
|
|
|
- amapKey="db2da7e3e248c3b2077d53fc809be63f"
|
|
|
- securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
|
|
|
- :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
|
|
|
- @map-crossing-click="handleMapCrossingClick"
|
|
|
+ <!-- 路口列表 -->
|
|
|
+ <div v-if="currentView === 'list-mode' && activeLeftTab === 'crossing'" class="list-mode-panel">
|
|
|
+ <CrossingListPanel :onViewDetail="handleCrossingViewDetail"/>
|
|
|
+ </div>
|
|
|
+ <!-- 地图 -->
|
|
|
+ <TongzhouTrafficMap v-else ref="trafficMapRef"
|
|
|
+ amapKey="db2da7e3e248c3b2077d53fc809be63f"
|
|
|
+ securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
|
|
|
+ :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
|
|
|
+ @map-crossing-click="handleMapCrossingClick"
|
|
|
+ @map-crossing-mouseover="handleMapCrossingMouseover"
|
|
|
+ @map-crossing-mouseout="handleMapCrossingMouseout"
|
|
|
+
|
|
|
/>
|
|
|
</template>
|
|
|
|
|
|
+
|
|
|
<template #left>
|
|
|
<!-- 左侧Tab菜单栏 -->
|
|
|
- <div class="left-sidebar-wrap">
|
|
|
- <TechTabs v-model="activeLeftTab" type="underline">
|
|
|
+ <div class="left-sidebar-wrap" v-if="currentView !== 'list-mode'">
|
|
|
+ <TechTabs v-model="activeLeftTab" type="underline" @tab-click="handleTabClick">
|
|
|
<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" />
|
|
|
+ @node-click="handleMenuClick" @folder-click="handleFolderClick"/>
|
|
|
</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" />
|
|
|
+ <MenuItem v-for="item in trunkLineMenuData" :key="item.id" :node="item" :level="0"
|
|
|
+ @node-click="handleTrunkLineClick">
|
|
|
+ <template #label="{ node }">
|
|
|
+ <span v-if="node.children && node.children.length > 0">{{ node.label }}</span>
|
|
|
+ <span v-else>{{ node.label }} 绿波带</span>
|
|
|
+ </template>
|
|
|
+ </MenuItem>
|
|
|
</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" />
|
|
|
+ <TaskCardList :listData="tableData" class="special-duty-pane"
|
|
|
+ @view="({ item }) => handleSpecialTaskView(item)"
|
|
|
+ @start="({ item }) => handleSpecialTaskStart(item)"
|
|
|
+ @end="({ item }) => handleSpecialTaskEnd(item)"
|
|
|
+ @restart="({ item }) => handleSpecialTaskRestart(item)"
|
|
|
+ />
|
|
|
</TechTabPane>
|
|
|
</TechTabs>
|
|
|
</div>
|
|
|
+ <div class="list-mode-tabs" v-else>
|
|
|
+ <TechTabs v-model="activeLeftTab" type="underline" @tab-click="onListTabSelect">
|
|
|
+ <TechTabPane label="总览" name="overview" />
|
|
|
+ <TechTabPane label="路口" name="crossing" />
|
|
|
+ <TechTabPane label="干线" name="trunkLine" />
|
|
|
+ <TechTabPane label="特勤" name="specialDuty" />
|
|
|
+ </TechTabs>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<template #right>
|
|
|
-
|
|
|
+ <!-- 模式切换按钮组 -->
|
|
|
+ <div class="mode-switch" v-if="activeLeftTab === 'crossing'">
|
|
|
+ <ButtonGroup v-model="currentView" :options="viewOptions" @select="onViewSelect" />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<template #center>
|
|
|
-
|
|
|
+ <!-- 顶部常驻图表区域（替代弹窗） -->
|
|
|
+ <div class="top-charts-bar" v-if="currentView !== 'list-mode'">
|
|
|
+ <!-- 总览Tab -->
|
|
|
+ <template v-if="activeLeftTab === 'overview'">
|
|
|
+ <div class="top-chart-box overview-chart-box">
|
|
|
+ <OnlineStatusTabs />
|
|
|
+ </div>
|
|
|
+ <div class="top-chart-box overview-chart-box">
|
|
|
+ <DeviceStatusTabs />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 路口Tab -->
|
|
|
+ <template v-if="activeLeftTab === 'crossing'">
|
|
|
+ <div class="top-chart-box overview-chart-box">
|
|
|
+ <OnlineStatusTabs />
|
|
|
+ </div>
|
|
|
+ <div class="top-chart-box overview-chart-box">
|
|
|
+ <DeviceStatusTabs />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
</DashboardLayout>
|
|
|
@@ -56,220 +103,604 @@
|
|
|
|
|
|
<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 ButtonGroup from '@/components/ui/ButtonGroup.vue';
|
|
|
+import TaskCardList from '@/components/ui/TaskCardList.vue';
|
|
|
+import CrossingListPanel from '@/components/ui/CrossingListPanel.vue';
|
|
|
+import OnlineStatusTabs from '@/components/ui/OnlineStatusTabs.vue';
|
|
|
+import DeviceStatusTabs from '@/components/ui/DeviceStatusTabs.vue';
|
|
|
+import { apiGetTongzhouMenuTree, apiGetTrunkLineMenuTree, apiGetTasks, apiGetTrafficTimeSpace, apiGetCrossingTopCharts, apiGetSpecialTaskMonitorData, apiGetCrossingDetailData } from '@/api';
|
|
|
|
|
|
|
|
|
export default {
|
|
|
- name: "HomePage",
|
|
|
+ name: "SpecialSituationMonitoring",
|
|
|
components: {
|
|
|
DashboardLayout,
|
|
|
- WeatherWidget,
|
|
|
DateTimeWidget,
|
|
|
TechTabs,
|
|
|
TechTabPane,
|
|
|
TongzhouTrafficMap,
|
|
|
MenuItem,
|
|
|
+ ButtonGroup,
|
|
|
+ TaskCardList,
|
|
|
+ CrossingListPanel,
|
|
|
+ OnlineStatusTabs,
|
|
|
+ DeviceStatusTabs,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
// 左侧边栏数据
|
|
|
- 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: '万盛南街 - 颐瑞东路' }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
-
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
+ activeLeftTab: 'specialDuty', // 默认激活特勤Tab
|
|
|
+ menuData: [],
|
|
|
+ trunkLineMenuData: [],
|
|
|
+ // 地图模式切换数据
|
|
|
+ currentView: 'map-mode',
|
|
|
+ viewOptions: [
|
|
|
+ { label: '列表模式', value: 'list-mode' },
|
|
|
+ { label: '地图模式', value: 'map-mode' },
|
|
|
+ ],
|
|
|
+ // 特勤表头
|
|
|
+ tableColumns: [
|
|
|
+ { label: '序号', key: 'id', width: '10%' },
|
|
|
+ { label: '名称', key: 'name', width: '30%' },
|
|
|
+ { label: '执行人', key: 'executor', width: '15%' },
|
|
|
+ { label: '等级', key: 'level', width: '12%' },
|
|
|
+ { label: '状态', key: 'status', width: '13%' },
|
|
|
+ { label: '操作', key: 'action', width: '20%' }
|
|
|
+ ],
|
|
|
+
|
|
|
+ tableData: [],
|
|
|
+ // 路口顶部图表数据
|
|
|
+ crossingTopCharts: {},
|
|
|
+ // 路口多选分屏
|
|
|
+ crossingSelections: [],
|
|
|
+ maxCrossingSlots: 4,
|
|
|
};
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ // 监听路由参数变化（解决多次从首页点击不同数据跳转过来，页面不刷新的问题）
|
|
|
+ '$route.query': {
|
|
|
+ handler() {
|
|
|
+ this.checkRouteParams();
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
created() {
|
|
|
|
|
|
},
|
|
|
- mounted() {
|
|
|
+ async mounted() {
|
|
|
+ // 加载菜单和任务数据
|
|
|
+ const [menuData, trunkData, taskData] = await Promise.all([
|
|
|
+ apiGetTongzhouMenuTree(),
|
|
|
+ apiGetTrunkLineMenuTree(),
|
|
|
+ apiGetTasks({ pageSize: 5 }),
|
|
|
+ ]);
|
|
|
+ this.menuData = menuData || [];
|
|
|
+ this.trunkLineMenuData = trunkData || [];
|
|
|
+ this.tableData = taskData?.list || taskData || [];
|
|
|
+
|
|
|
+ // 组件挂载时检查路由
|
|
|
+ this.checkRouteParams();
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
- handleMenuClick(nodeData) {
|
|
|
- console.log('父组件接收到了最底层路口点击事件:', nodeData);
|
|
|
- // 这里可以根据 nodeData 的经纬度来控制地图组件的视角
|
|
|
- this.testOpenSecurityRoute();
|
|
|
- this.testOpenSecurityRoute2();
|
|
|
+ // 处理地图鼠标滑入事件
|
|
|
+ handleMapCrossingMouseover(mapData, lnglat, pixel) {
|
|
|
+ console.log('父组件接收到了地图路口鼠标滑入事件:', mapData);
|
|
|
+ // 组装模拟数据
|
|
|
+ const scale = window.innerWidth / 1920;
|
|
|
+ let nodeData = {
|
|
|
+ id: mapData.position[0] + mapData.position[1],
|
|
|
+ label: mapData.road,
|
|
|
+ // 反算为设计稿坐标（SmartDialog 内部会再乘 scale）
|
|
|
+ pixelX: pixel ? Math.round(pixel.x / scale) : 950,
|
|
|
+ pixelY: pixel ? Math.round(pixel.y / scale) : 430,
|
|
|
+ }
|
|
|
+ console.log(nodeData);
|
|
|
+ if (this.activeLeftTab === 'overview') { // 总览
|
|
|
+ this.showOverviewDalogs(nodeData);
|
|
|
+ } else if (this.activeLeftTab === 'crossing') { // 路口
|
|
|
+ this.showOverviewDalogs(nodeData);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 处理地图鼠标滑出事件
|
|
|
+ handleMapCrossingMouseout(mapData) {
|
|
|
+ console.log('父组件接收到了地图路口鼠标滑出事件:', mapData);
|
|
|
+ if (this.activeLeftTab === 'overview' && mapData) { // 总览
|
|
|
+ const id = mapData.position[0] + mapData.position[1];
|
|
|
+ this.$refs.layout.handleDialogClose('crossing3_' + id);
|
|
|
+ } else if (this.activeLeftTab === 'crossing' && mapData) { // 路口
|
|
|
+
|
|
|
+ const id = mapData.position[0] + mapData.position[1];
|
|
|
+ this.$refs.layout.handleDialogClose('crossing3_' + id);
|
|
|
+ }
|
|
|
},
|
|
|
// 处理地图点击事件
|
|
|
- handleMapCrossingClick(mapData, lnglat) {
|
|
|
- console.log('父组件接收到了地图路口点击事件:', mapData, lnglat);
|
|
|
+ handleMapCrossingClick(mapData, lnglat, pixel) {
|
|
|
+ console.log('父组件接收到了地图路口点击事件:', mapData);
|
|
|
+ console.log('父组件接收到了地图路口点击事件:', lnglat);
|
|
|
+ console.log('父组件接收到了地图路口点击事件:', pixel);
|
|
|
// 组装模拟数据
|
|
|
+ const scale = window.innerWidth / 1920;
|
|
|
let nodeData = {
|
|
|
- id: Math.random(1, 100),
|
|
|
+ id: mapData.position[0] + mapData.position[1],
|
|
|
label: mapData.road,
|
|
|
+ // 反算为设计稿坐标（SmartDialog 内部会再乘 scale）
|
|
|
+ pixelX: pixel ? Math.round(pixel.x / scale) : 950,
|
|
|
+ pixelY: pixel ? Math.round(pixel.y / scale) : 430,
|
|
|
}
|
|
|
console.log(nodeData);
|
|
|
if (this.activeLeftTab === 'overview') { // 总览
|
|
|
- this.testOpenSecurityRoute();
|
|
|
- this.testOpenSecurityRoute2();
|
|
|
+ this.showCrossingDetailDialogs(nodeData);
|
|
|
} else if (this.activeLeftTab === 'crossing') { // 路口
|
|
|
- this.testOpenSecurityRoute();
|
|
|
- this.testOpenSecurityRoute2();
|
|
|
+ this.showCrossingDalogs(nodeData);
|
|
|
} else if (this.activeLeftTab === 'trunkLine') { // 干线
|
|
|
- this.testOpenSecurityRoute();
|
|
|
- this.testOpenSecurityRoute2();
|
|
|
+ this.showTrunkLineDalogs(nodeData);
|
|
|
} else if (this.activeLeftTab === 'specialDuty') { // 特勤
|
|
|
- this.testOpenSecurityRoute();
|
|
|
- this.testOpenSecurityRoute2();
|
|
|
+ this.showSpecialDutyDalogs(nodeData);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 列表模式Tab切换
|
|
|
+ onListTabSelect(tabName) {
|
|
|
+ if (tabName !== 'crossing') {
|
|
|
+ this.currentView = 'map-mode';
|
|
|
+ }
|
|
|
+ this.handleTabClick(tabName);
|
|
|
+ },
|
|
|
+ // 模式切换
|
|
|
+ onViewSelect(item) {
|
|
|
+ console.log('你点击了：', item.label);
|
|
|
+ this.currentView = item.value;
|
|
|
+ this.$refs.layout.clearDialogs(); // 清空全部弹窗
|
|
|
+ this.crossingSelections = [];
|
|
|
+ // 列表模式弹窗
|
|
|
+ if (this.currentView === 'list-mode') {
|
|
|
+ // this.$refs.layout.openDialog({
|
|
|
+ // id: 'crossing-list', // 这里的 ID 可以根据实际业务场景动态生成
|
|
|
+ // title: '',
|
|
|
+ // component: 'CrossingListPanel',
|
|
|
+ // width: 1920,
|
|
|
+ // height: 750,
|
|
|
+ // center: false,
|
|
|
+ // showClose: true,
|
|
|
+ // noPadding: false,
|
|
|
+ // enableDblclickExpand: false,
|
|
|
+ // position: { x: 100, y: 150 },
|
|
|
+ // data: {
|
|
|
+ // onViewDetail: (rowData) => this.handleCrossingViewDetail(rowData)
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ } else {
|
|
|
+ this.loadCrossingTopCharts();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 处理tab点击
|
|
|
+ handleTabClick(tabName) {
|
|
|
+ console.log('父组件接收到了tab点击事件:', tabName);
|
|
|
+ this.$refs.layout.clearDialogs(); // 清空全部弹窗
|
|
|
+ this.crossingSelections = [];
|
|
|
+ this.showTopChartDalogs(); // 根据当前Tab显示对应的顶部常驻图表
|
|
|
+ },
|
|
|
+ // 处理菜单folder标题点击
|
|
|
+ handleFolderClick(nodeData) {
|
|
|
+ console.log('父组件接收到了文件夹点击事件:', nodeData);
|
|
|
+ // 临时逻辑，有真实接口后可以删除
|
|
|
+ const index = Math.floor(Math.random() * 10);
|
|
|
+ const position = localStorage.getItem(`pos${index + 1}`).split(',');
|
|
|
+
|
|
|
+ // 地图联动
|
|
|
+ this.$refs.trafficMapRef.focusByLocation([Number(position[0]), Number(position[1])]);
|
|
|
+ },
|
|
|
+ // 处理菜单点击
|
|
|
+ handleMenuClick(nodeData) {
|
|
|
+ console.log('父组件接收到了最底层路口点击事件:', nodeData);
|
|
|
+ // 通过地图组件获取像素坐标（如果有经纬度的话）
|
|
|
+ // if (nodeData.lng && nodeData.lat && this.$refs.trafficMapRef) {
|
|
|
+ // // 地图联动
|
|
|
+ // this.$refs.trafficMapRef.focusByLocation([nodeData.lng, nodeData.lat]);
|
|
|
+
|
|
|
+ // const pixel = this.$refs.trafficMapRef.lngLatToPixel(nodeData.lng, nodeData.lat);
|
|
|
+ // if (pixel) {
|
|
|
+ // const scale = window.innerWidth / 1920;
|
|
|
+ // nodeData.pixelX = Math.round(pixel.x / scale) + 20;
|
|
|
+ // nodeData.pixelY = Math.round(pixel.y / scale);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 根据Tab来显示不同的弹窗内容
|
|
|
+ if (this.activeLeftTab === 'overview') { // 总览
|
|
|
+ // 临时逻辑，有真实接口后可以删除
|
|
|
+ const index = Math.floor(Math.random() * 10);
|
|
|
+ const position = localStorage.getItem(`pos${index + 1}`).split(',');
|
|
|
+
|
|
|
+ // 地图联动
|
|
|
+ this.$refs.trafficMapRef.focusByLocation([Number(position[0]), Number(position[1])]);
|
|
|
+
|
|
|
+ this.showOverviewDalogs(nodeData);
|
|
|
+ } else if (this.activeLeftTab === 'crossing') { // 路口
|
|
|
+ this.showCrossingDalogs(nodeData);
|
|
|
+ } else if (this.activeLeftTab === 'trunkLine') { // 干线
|
|
|
+ this.showTrunkLineDalogs(nodeData);
|
|
|
+ } else if (this.activeLeftTab === 'specialDuty') { // 特勤
|
|
|
+ this.showSpecialDutyDalogs(nodeData);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 处理弹窗双击展开（通过 onExpand 回调从 Layout 传入）
|
|
|
+ handleDoubleClickExpend(nodeData) {
|
|
|
+ console.log('处理弹窗双击事件', nodeData);
|
|
|
+ if (this.activeLeftTab === 'crossing' || this.activeLeftTab === 'overview') {
|
|
|
+ this.showCrossingDetailDialogs(nodeData);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 显示顶部常驻图表（根据当前Tab状态）
|
|
|
+ showTopChartDalogs() {
|
|
|
+ if (this.activeLeftTab === 'crossing') {
|
|
|
+ this.loadCrossingTopCharts();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 显示总览弹窗组
|
|
|
+ showOverviewDalogs(nodeData) {
|
|
|
+ console.log('显示总览弹窗组', nodeData.id, nodeData.label);
|
|
|
+ // 路口弹窗
|
|
|
+ this.$refs.layout.openDialog({
|
|
|
+ id: 'crossing3_' + nodeData.id, // 这里的 ID 可以根据实际业务场景动态生成
|
|
|
+ title: nodeData.label,
|
|
|
+ component: 'CrossingPanel',
|
|
|
+ width: 260,
|
|
|
+ height: 260,
|
|
|
+ center: false,
|
|
|
+ showClose: true,
|
|
|
+ position: { x: (nodeData.pixelX || 950) + 20, y: nodeData.pixelY || 430 },
|
|
|
+ noPadding: false,
|
|
|
+ data: {
|
|
|
+ ...nodeData,
|
|
|
+ onExpand: (data) => this.handleDoubleClickExpend(data)
|
|
|
+ },
|
|
|
+ onClose: () => {
|
|
|
+ // this.$refs.layout.handleDialogClose('top-chart-crossing-1');
|
|
|
+ // this.$refs.layout.handleDialogClose('top-chart-crossing-2');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async loadCrossingTopCharts() {
|
|
|
+ try {
|
|
|
+ this.crossingTopCharts = await apiGetCrossingTopCharts();
|
|
|
+ } catch (e) { /* ignore */ }
|
|
|
+ },
|
|
|
+ // 显示路口弹窗组（多选分屏）
|
|
|
+ showCrossingDalogs(nodeData) {
|
|
|
+ console.log('路口多选', nodeData.id, nodeData.label);
|
|
|
+
|
|
|
+ // 1. 已选中 → 不重复操作
|
|
|
+ const existIndex = this.crossingSelections.findIndex(c => c.id === nodeData.id);
|
|
|
+ if (existIndex !== -1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 2. 已满 → 先进先出
|
|
|
+ if (this.crossingSelections.length >= this.maxCrossingSlots) {
|
|
|
+ this.crossingSelections.shift();
|
|
|
}
|
|
|
+
|
|
|
+ // 3. 追加选中
|
|
|
+ this.crossingSelections.push({ ...nodeData });
|
|
|
+
|
|
|
+ // 4. 打开或更新弹窗
|
|
|
+ this.openCrossingMultiView();
|
|
|
},
|
|
|
- // ================= 测试用例：模拟各种点击行为 =================
|
|
|
|
|
|
- // 模拟 1：打开特勤安保路线面板
|
|
|
- testOpenSecurityRoute() {
|
|
|
+ openCrossingMultiView() {
|
|
|
this.$refs.layout.openDialog({
|
|
|
- id: 'dev-security-route',
|
|
|
+ id: 'crossing-multi-view',
|
|
|
title: '',
|
|
|
- component: 'SecurityRoutePanelSwitch',
|
|
|
+ component: 'CrossingMultiView',
|
|
|
+ width: 1400,
|
|
|
+ height: 700,
|
|
|
+ center: false,
|
|
|
+ position: { x: 500, y: 150 },
|
|
|
+ showClose: false,
|
|
|
+ noPadding: true,
|
|
|
+ enableDblclickExpand: false,
|
|
|
+ draggable: false,
|
|
|
+ data: {
|
|
|
+ crossings: [...this.crossingSelections],
|
|
|
+ maxSlots: this.maxCrossingSlots,
|
|
|
+ onRemove: (id) => this.handleCrossingRemove(id),
|
|
|
+ onReorder: (newOrder) => {
|
|
|
+ this.crossingSelections = newOrder;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onClose: () => {
|
|
|
+ this.crossingSelections = [];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ handleCrossingRemove(id) {
|
|
|
+ this.crossingSelections = this.crossingSelections.filter(c => c.id !== id);
|
|
|
+ if (this.crossingSelections.length === 0) {
|
|
|
+ this.$refs.layout.handleDialogClose('crossing-multi-view');
|
|
|
+ } else {
|
|
|
+ this.openCrossingMultiView();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 单个路口详情弹窗（总览双击展开等场景使用）
|
|
|
+ async showCrossingDetailDialogs(nodeData) {
|
|
|
+ console.log('显示路口详情弹窗组', nodeData.id, nodeData.label);
|
|
|
+ const detailData = await apiGetCrossingDetailData(nodeData.id);
|
|
|
+ const dialogId = 'crossing_detail' + nodeData.id;
|
|
|
+ this.$refs.layout.openDialog({
|
|
|
+ id: dialogId,
|
|
|
+ title: ' ',
|
|
|
+ component: 'CrossingDetailPanel',
|
|
|
+ width: 1315,
|
|
|
+ height: 682,
|
|
|
+ center: false,
|
|
|
+ showClose: true,
|
|
|
+ position: { x: 500, y: 170 },
|
|
|
+ noPadding: false,
|
|
|
+ enableDblclickExpand: false,
|
|
|
+ data: { ...nodeData, preloadedData: detailData },
|
|
|
+ headerComponent: 'CrossingDetailHeader',
|
|
|
+ headerProps: {
|
|
|
+ currentRoute: detailData?.currentRoute || {},
|
|
|
+ intersectionData: detailData?.intersectionData || {},
|
|
|
+ cycleLength: detailData?.cycleLength || 0,
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 路口列表模式下弹窗
|
|
|
+ handleCrossingViewDetail(rowData) {
|
|
|
+ console.log('显示路口列表查看', rowData);
|
|
|
+ this.showCrossingDetailDialogs(rowData);
|
|
|
+ },
|
|
|
+ // 显示干线弹窗组
|
|
|
+ // 干线菜单叶子节点点击
|
|
|
+ handleTrunkLineClick(nodeData) {
|
|
|
+ console.log('干线菜单点击:', nodeData);
|
|
|
+ this.showTrunkLineDalogs(nodeData);
|
|
|
+ },
|
|
|
+ async showTrunkLineDalogs(nodeData) {
|
|
|
+ console.log('显示干线弹窗组', nodeData.id, nodeData.label);
|
|
|
+ // 优先使用菜单节点自带的路口和距离数据
|
|
|
+ let tsData;
|
|
|
+ if (nodeData.intersections && nodeData.distances) {
|
|
|
+ tsData = await apiGetTrafficTimeSpace({
|
|
|
+ intersections: nodeData.intersections,
|
|
|
+ distances: nodeData.distances,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ tsData = await apiGetTrafficTimeSpace();
|
|
|
+ }
|
|
|
+ this.$refs.layout.openDialog({
|
|
|
+ id: nodeData.id,
|
|
|
+ title: nodeData.label + ' 绿波带',
|
|
|
+ component: 'TrafficTimeSpace',
|
|
|
width: 1000,
|
|
|
height: 500,
|
|
|
center: true,
|
|
|
+ showClose: true,
|
|
|
+ noPadding: false,
|
|
|
+ data: tsData,
|
|
|
});
|
|
|
},
|
|
|
+ // 显示特勤弹窗组
|
|
|
+ showSpecialDutyDalogs(nodeData) {
|
|
|
+ console.log('显示特勤弹窗组', nodeData.id, nodeData.label);
|
|
|
+ this.openDutyDetailDialog(nodeData);
|
|
|
+ },
|
|
|
+ // === 解析路由参数并执行对应操作 ===
|
|
|
+ checkRouteParams() {
|
|
|
+ // 统一参数接收：特勤接收 id，路口接收 intersectionName 和 plan
|
|
|
+ const { tab, action, id, } = this.$route.query;
|
|
|
+
|
|
|
+ if (!tab) return; // 如果没有传递 tab 参数，说明是正常访问，不处理
|
|
|
+
|
|
|
+ // 1. 处理“特勤线路”跳转
|
|
|
+ if (tab === 'specialDuty') {
|
|
|
+ this.activeLeftTab = 'specialDuty'; // 切换到左侧【特勤】Tab
|
|
|
+ this.handleTabClick('specialDuty'); // 手动触发 Tab 切换事件，更新顶部图表
|
|
|
|
|
|
- // 模拟 2：打开特勤安保路线小面板
|
|
|
- testOpenSecurityRoute2() {
|
|
|
+ // 这里判断的条件改为 id
|
|
|
+ if (action === 'open-dialog' && id) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.openDutyDetailDialog({id: id, label: '特勤路口'}); // 打开特勤弹窗
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 2. 处理“关键路口”跳转
|
|
|
+ else if (tab === 'crossing') {
|
|
|
+ this.activeLeftTab = 'crossing'; // 切换到左侧【路口】Tab
|
|
|
+ this.handleTabClick('crossing'); // 手动触发 Tab 切换事件，更新顶部图表
|
|
|
+
|
|
|
+ if (action === 'open-dialog') {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 构造一个假的 nodeData 传给详情弹窗方法
|
|
|
+ this.showCrossingDetailDialogs({
|
|
|
+ id: 'route_' + new Date().getTime(), // 动态生成一个ID防重复
|
|
|
+ label: '路口详情',
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // === 特勤详情弹窗 (你需要根据实际组件名替换) ===
|
|
|
+ async openDutyDetailDialog(nodeData) {
|
|
|
+ console.log('准备打开特勤线路详情：', nodeData);
|
|
|
+ // 1. 获取数据
|
|
|
+ const panelData = await apiGetSpecialTaskMonitorData(nodeData.id);
|
|
|
+
|
|
|
+ const id = 'special-task-dialog' + new Date().getTime();
|
|
|
+ // 2. 呼出弹窗
|
|
|
this.$refs.layout.openDialog({
|
|
|
- id: 'dev-security-route-small',
|
|
|
- title: '',
|
|
|
- component: 'SecurityRoutePanelSwitchSmall',
|
|
|
- width: 550,
|
|
|
- height: 300,
|
|
|
+ id: id,
|
|
|
+ title: ' ', // 留空以隐藏默认标题，使用自定义 Header
|
|
|
+ width: 1400, // 弹窗宽一点，容纳 3 列
|
|
|
+ height: 700,
|
|
|
center: false,
|
|
|
- position: { x: 1400, y: 550 },
|
|
|
- data: {
|
|
|
- onClose: () => this.$refs.layout.closeDialog('dev-security-route-small')
|
|
|
+ showClose: true,
|
|
|
+ noPadding: true, // 去除默认内边距，让内部组件自己控制
|
|
|
+ position: {x: 200, y: 150},
|
|
|
+ // 挂载主体组件和数据
|
|
|
+ component: 'SpecialTaskMonitorPanel',
|
|
|
+ data: { panelData: panelData },
|
|
|
+ // 挂载自定义 Header 和数据
|
|
|
+ headerComponent: 'TaskMonitorHeader',
|
|
|
+ headerProps: {
|
|
|
+ taskData: panelData.taskInfo,
|
|
|
+ onStartTask: () => {
|
|
|
+ console.log('点击了立即执行');
|
|
|
+ panelData.taskInfo.status = '进行中';
|
|
|
+ const tableRow = this.tableData.find(r => r.id === nodeData.id);
|
|
|
+ if (tableRow) tableRow.status = '进行中';
|
|
|
+ },
|
|
|
+ onEndTask: () => {
|
|
|
+ console.log('点击了立即结束');
|
|
|
+ panelData.taskInfo.status = '已完成';
|
|
|
+ const tableRow = this.tableData.find(r => r.id === nodeData.id);
|
|
|
+ if (tableRow) tableRow.status = '已完成';
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
+ return panelData;
|
|
|
},
|
|
|
+ handleSpecialTaskView(row) {
|
|
|
+ console.log('查看特勤线路，当前数据：', row);
|
|
|
+ this.openDutyDetailDialog(row);
|
|
|
+ },
|
|
|
+ async handleSpecialTaskStart(row) {
|
|
|
+ console.log('立即执行特勤任务：', row);
|
|
|
+ const panelData = await this.openDutyDetailDialog(row);
|
|
|
+ this.$msg({
|
|
|
+ title: '操作确认',
|
|
|
+ message: `确认立即执行任务「${row.name}」？`,
|
|
|
+ duration: 0,
|
|
|
+ showConfirm: true,
|
|
|
+ showCancel: true,
|
|
|
+ confirmText: '确认执行',
|
|
|
+ noBackdrop: true,
|
|
|
+ onConfirm: () => { row.status = '进行中'; panelData.taskInfo.status = '进行中'; }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async handleSpecialTaskEnd(row) {
|
|
|
+ console.log('立即结束特勤任务：', row);
|
|
|
+ const panelData = await this.openDutyDetailDialog(row);
|
|
|
+ this.$msg({
|
|
|
+ title: '操作确认',
|
|
|
+ message: `确认立即结束任务「${row.name}」？`,
|
|
|
+ duration: 0,
|
|
|
+ showConfirm: true,
|
|
|
+ showCancel: true,
|
|
|
+ confirmText: '确认结束',
|
|
|
+ noBackdrop: true,
|
|
|
+ onConfirm: () => { row.status = '已完成'; panelData.taskInfo.status = '已完成'; }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async handleSpecialTaskRestart(row) {
|
|
|
+ console.log('重新开始特勤任务：', row);
|
|
|
+ const panelData = await this.openDutyDetailDialog(row);
|
|
|
+ this.$msg({
|
|
|
+ title: '操作确认',
|
|
|
+ message: `确认重新开始任务「${row.name}」？`,
|
|
|
+ duration: 0,
|
|
|
+ showConfirm: true,
|
|
|
+ showCancel: true,
|
|
|
+ confirmText: '确认开始',
|
|
|
+ noBackdrop: true,
|
|
|
+ onConfirm: () => { row.status = '进行中'; panelData.taskInfo.status = '进行中'; }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-<style scoped></style>
|
|
|
+<style scoped>
|
|
|
+.mode-switch {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.mode-switch>div {
|
|
|
+ width: 200px;
|
|
|
+}
|
|
|
+.duty-table {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.action-btn {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #4da8ff;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+.action-btn:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+}
|
|
|
+.action-start {
|
|
|
+ color: #67c23a;
|
|
|
+}
|
|
|
+.action-end {
|
|
|
+ color: #f56c6c;
|
|
|
+}
|
|
|
+.top-charts-bar {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: clamp(10px, 1.04vw, 20px);
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+.top-chart-box {
|
|
|
+ pointer-events: auto;
|
|
|
+ flex-shrink: 0;
|
|
|
+ background: radial-gradient(circle at 20% 0%, rgba(40,120,200,0.5) 0%, rgba(20,60,130,0.7) 70%);
|
|
|
+ box-shadow: inset 0px 0px 0.625rem 0px rgba(88, 146, 255, 0.4), inset 1.25rem 0px 1.875rem -0.625rem rgba(88, 146, 255, 0.15);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.15);
|
|
|
+ border-radius: clamp(6px, 0.625vw, 12px);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+/* --- 总览Tab图表尺寸适配 (原 300x160) --- */
|
|
|
+.overview-chart-box {
|
|
|
+ /* clamp(最小值, 理想值(1920下比例), 最大值) */
|
|
|
+ width: clamp(200px, 15.625vw, 300px);
|
|
|
+ height: clamp(106px, 8.333vw, 160px);
|
|
|
+}
|
|
|
+
|
|
|
+/* --- 路口Tab图表尺寸适配 (原 228x124) --- */
|
|
|
+.crossing-chart-box {
|
|
|
+ width: clamp(152px, 11.875vw, 228px);
|
|
|
+ height: clamp(82px, 6.458vw, 124px);
|
|
|
+}
|
|
|
+::v-deep .list-mode-panel {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ padding: 150px 30px 30px 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.list-mode-tabs {
|
|
|
+ flex-shrink: 0;
|
|
|
+ max-width: 400px;
|
|
|
+}
|
|
|
+.duty-name {
|
|
|
+ display: inline-block;
|
|
|
+ max-width: 8em;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+/* 针对特勤 Tab 单独剥离背景和边框 */
|
|
|
+::v-deep .special-duty-pane {
|
|
|
+ padding: 10px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
