Merge branch 'develop' of https://gitea.joylink.club/joylink/rtss-simulation-app-client into develop
This commit is contained in:
commit
53335d35ba
147
public/iscsMenuIcon.svg
Normal file
147
public/iscsMenuIcon.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 67 KiB |
@ -3,65 +3,115 @@ import { IscsStyle } from 'src/api/DraftApi';
|
|||||||
//达实智能(福州一号线)
|
//达实智能(福州一号线)
|
||||||
const DA_SHI_ZHI_NENG = [
|
const DA_SHI_ZHI_NENG = [
|
||||||
{
|
{
|
||||||
menuName: '火灾报警',
|
menuName: 'Plan',
|
||||||
sunMenu: [
|
icon: 'svguse:../iscsMenuIcon.svg#icon-Plan',
|
||||||
{ sunMenuName: '站台报警' },
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-Plan-active',
|
||||||
{ sunMenuName: '站厅报警' },
|
|
||||||
{ sunMenuName: '系统状态' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
menuName: '机电',
|
|
||||||
sunMenu: [
|
|
||||||
{ sunMenuName: '大系统' },
|
|
||||||
{ sunMenuName: '小系统' },
|
|
||||||
{ sunMenuName: '水系统' },
|
|
||||||
{ sunMenuName: '照明' },
|
|
||||||
{ sunMenuName: '电、扶梯' },
|
|
||||||
{ sunMenuName: '给排水' },
|
|
||||||
{ sunMenuName: '模式' },
|
|
||||||
{ sunMenuName: '隧道通风' },
|
|
||||||
{ sunMenuName: '时间表' },
|
|
||||||
{ sunMenuName: '权限交接' },
|
|
||||||
{ sunMenuName: '传感器' },
|
|
||||||
{ sunMenuName: '车站网络' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
menuName: '广播',
|
|
||||||
sunMenu: [{ sunMenuName: '子目录' }],
|
sunMenu: [{ sunMenuName: '子目录' }],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
menuName: '乘客信息',
|
menuName: 'PSCADA',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-PSCADA',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PSCADA-active',
|
||||||
sunMenu: [{ sunMenuName: '子目录' }],
|
sunMenu: [{ sunMenuName: '子目录' }],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
menuName: '闭路电视',
|
menuName: 'BAS',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-BAS',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-BAS-active',
|
||||||
|
sunMenu: [{ sunMenuName: '子目录' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
menuName: 'FAS',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-FAS',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-FAS-active',
|
||||||
sunMenu: [
|
sunMenu: [
|
||||||
{ sunMenuName: '车站控制' },
|
{ sunMenuName: '设备分区图' },
|
||||||
{ sunMenuName: '车站时序' },
|
{ sunMenuName: '火灾报警平面图' },
|
||||||
{ sunMenuName: '车站时序编辑' },
|
{ sunMenuName: 'FAS气灭系统图' },
|
||||||
{ sunMenuName: '车站设备状态' },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
menuName: '屏蔽门',
|
menuName: 'TFDS',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-TFDS',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-TFDS-active',
|
||||||
|
sunMenu: [{ sunMenuName: '子目录' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
menuName: 'AFC',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-AFC',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-AFC-active',
|
||||||
sunMenu: [{ sunMenuName: '屏蔽门' }],
|
sunMenu: [{ sunMenuName: '屏蔽门' }],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
menuName: '售检票',
|
menuName: 'CCTV',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-CCTV',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-CCTV-active',
|
||||||
|
sunMenu: [{ sunMenuName: '监控布局图' }, { sunMenuName: 'CCTV设备布局图' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
menuName: 'PIS',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-PIS',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PIS-active',
|
||||||
sunMenu: [{ sunMenuName: '子目录' }],
|
sunMenu: [{ sunMenuName: '子目录' }],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
menuName: '门禁',
|
menuName: 'PA',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-PA',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PA-active',
|
||||||
sunMenu: [{ sunMenuName: '子目录' }],
|
sunMenu: [{ sunMenuName: '子目录' }],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
menuName: '防淹门',
|
menuName: 'SIG/RAD',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-SIG/RAD',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-SIG/RAD-active',
|
||||||
sunMenu: [{ sunMenuName: '子目录' }],
|
sunMenu: [{ sunMenuName: '子目录' }],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
menuName: '网络状态',
|
menuName: 'ACS',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-ACS',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-ACS-active',
|
||||||
|
sunMenu: [{ sunMenuName: '子目录' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
menuName: 'PSD',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-PSD',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PSD-active',
|
||||||
|
sunMenu: [{ sunMenuName: '子目录' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
menuName: 'FG',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-FG',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-FG-active',
|
||||||
|
sunMenu: [{ sunMenuName: '子目录' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
menuName: 'ALM',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-ALM',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-ALM-active',
|
||||||
|
sunMenu: [{ sunMenuName: '子目录' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
menuName: 'NMS',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-NMS',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-NMS-active',
|
||||||
|
sunMenu: [{ sunMenuName: '子目录' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
menuName: 'OPS',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-OPS',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-OPS-active',
|
||||||
|
sunMenu: [{ sunMenuName: '子目录' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
menuName: '数据',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-Data',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-Data-active',
|
||||||
|
sunMenu: [{ sunMenuName: '子目录' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
menuName: '联动',
|
||||||
|
icon: 'svguse:../iscsMenuIcon.svg#icon-Linkage',
|
||||||
|
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-Linkage-active',
|
||||||
sunMenu: [{ sunMenuName: '子目录' }],
|
sunMenu: [{ sunMenuName: '子目录' }],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
@ -161,7 +161,7 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
|
|||||||
let canvasProperty;
|
let canvasProperty;
|
||||||
|
|
||||||
switch (drawStore.selectSubmenuAndStation.submenu) {
|
switch (drawStore.selectSubmenuAndStation.submenu) {
|
||||||
case '站台报警':
|
case '火灾报警平面图':
|
||||||
for (let i = 0; i < storage.fasPlatformAlarmStorages.length; i++) {
|
for (let i = 0; i < storage.fasPlatformAlarmStorages.length; i++) {
|
||||||
const fasPlatformAlarm = storage.fasPlatformAlarmStorages[i];
|
const fasPlatformAlarm = storage.fasPlatformAlarmStorages[i];
|
||||||
if (
|
if (
|
||||||
@ -174,7 +174,7 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case '车站控制':
|
case '监控布局图':
|
||||||
for (let i = 0; i < storage.cctvOfStationControlStorages.length; i++) {
|
for (let i = 0; i < storage.cctvOfStationControlStorages.length; i++) {
|
||||||
const ctvOfStationControl = storage.cctvOfStationControlStorages[i];
|
const ctvOfStationControl = storage.cctvOfStationControlStorages[i];
|
||||||
if (
|
if (
|
||||||
@ -231,7 +231,7 @@ export function saveDrawDatas(app: IDrawApp) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
switch (drawStore.selectSubmenuAndStation.submenu) {
|
switch (drawStore.selectSubmenuAndStation.submenu) {
|
||||||
case '站台报警':
|
case '火灾报警平面图':
|
||||||
for (let i = 0; i < storage.fasPlatformAlarmStorages.length; i++) {
|
for (let i = 0; i < storage.fasPlatformAlarmStorages.length; i++) {
|
||||||
const asPlatformAlarm = storage.fasPlatformAlarmStorages[i];
|
const asPlatformAlarm = storage.fasPlatformAlarmStorages[i];
|
||||||
if (
|
if (
|
||||||
@ -247,7 +247,7 @@ export function saveDrawDatas(app: IDrawApp) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case '车站控制':
|
case '监控布局图':
|
||||||
for (let i = 0; i < storage.cctvOfStationControlStorages.length; i++) {
|
for (let i = 0; i < storage.cctvOfStationControlStorages.length; i++) {
|
||||||
const cctvOfStationControl = storage.cctvOfStationControlStorages[i];
|
const cctvOfStationControl = storage.cctvOfStationControlStorages[i];
|
||||||
if (
|
if (
|
||||||
|
@ -1,34 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<q-layout view="hHh LpR fFf">
|
<q-layout view="hHh LpR fFf">
|
||||||
<q-header reveal class="bg-primary text-white">
|
<q-header class="bg-primary text-white">
|
||||||
<q-toolbar class="q-pa-sm">
|
<div class="top-menu">
|
||||||
<q-toolbar-title class="q-gutter-sm">
|
<div class="top-menu-left">成都地铁</div>
|
||||||
<div>
|
<div class="top-menu-middle">
|
||||||
<span class="q-pa-sm">地铁站</span>
|
<span class="data-margin">{{ currentData }}</span>
|
||||||
<q-btn-toggle
|
<span class="data-margin">{{ currentTime }}</span>
|
||||||
v-model="selectMenuName"
|
</div>
|
||||||
toggle-color="orange"
|
<div class="top-menu-right">
|
||||||
:options="menuOption"
|
|
||||||
@update:model-value="selectedMenu"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="q-pa-sm">子菜单</span>
|
|
||||||
<q-btn-toggle
|
|
||||||
v-model="selectSubMenuName"
|
|
||||||
toggle-color="orange"
|
|
||||||
:options="subMenuOption"
|
|
||||||
@update:model-value="selectedSubMenu"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<q-btn-toggle
|
|
||||||
v-model="selectStationName"
|
|
||||||
toggle-color="orange"
|
|
||||||
:options="stationOption"
|
|
||||||
@update:model-value="selectedStation"
|
|
||||||
/>
|
|
||||||
</q-toolbar-title>
|
|
||||||
<div class="q-gutter-sm">
|
|
||||||
<q-btn color="accent" label="功能菜单">
|
<q-btn color="accent" label="功能菜单">
|
||||||
<q-menu>
|
<q-menu>
|
||||||
<q-list style="min-width: 100px">
|
<q-list style="min-width: 100px">
|
||||||
@ -69,7 +48,115 @@
|
|||||||
<q-btn color="info" label="返回" @click="backConfirm" />
|
<q-btn color="info" label="返回" @click="backConfirm" />
|
||||||
<q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
|
<q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
|
||||||
</div>
|
</div>
|
||||||
</q-toolbar>
|
</div>
|
||||||
|
<div class="menu-nav">
|
||||||
|
<span class="menu-nav-leftTxet">{{
|
||||||
|
drawStore.selectSubmenuAndStation.station
|
||||||
|
}}</span>
|
||||||
|
<div class="menu-nav-right">
|
||||||
|
<div
|
||||||
|
class="menu-nav-contain"
|
||||||
|
v-for="(item, index) in menuOption"
|
||||||
|
:key="index"
|
||||||
|
@click="selectedMenu(item.value)"
|
||||||
|
>
|
||||||
|
<q-icon
|
||||||
|
size="18px"
|
||||||
|
class="menu-nav-img"
|
||||||
|
:name="selectMenuName == item.value ? item.activeIcon : item.icon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="menu-nav-text"
|
||||||
|
:class="{
|
||||||
|
active: selectMenuName == item.value,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ item.value }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="subMenu-nav">
|
||||||
|
<span class="menu-nav-leftTxet" />
|
||||||
|
<q-btn-toggle
|
||||||
|
v-model="selectSubMenuName"
|
||||||
|
no-caps
|
||||||
|
toggle-color="grey-10"
|
||||||
|
toggle-text-color="blue-8"
|
||||||
|
:options="subMenuOption"
|
||||||
|
@update:model-value="selectedSubMenu"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="station-nav">
|
||||||
|
<div class="station-list-left">
|
||||||
|
<div
|
||||||
|
class="station-list-left-box"
|
||||||
|
:class="{
|
||||||
|
active: clickOCC,
|
||||||
|
}"
|
||||||
|
@click="clickOCCFn()"
|
||||||
|
/>
|
||||||
|
<div class="station-list-left-text">OCC</div>
|
||||||
|
</div>
|
||||||
|
<div class="station-list">
|
||||||
|
<div class="station-list-contain">
|
||||||
|
<div class="station-line" />
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in stationOption"
|
||||||
|
:key="index"
|
||||||
|
class="station-box-contain"
|
||||||
|
>
|
||||||
|
<div class="station-box">
|
||||||
|
<div
|
||||||
|
class="station-list-box"
|
||||||
|
:class="{
|
||||||
|
active: selectStationName == item.value,
|
||||||
|
left: index == 0,
|
||||||
|
right: index == stationOption.length - 1,
|
||||||
|
}"
|
||||||
|
@click="selectedStation(item.value)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="station-name"
|
||||||
|
:class="
|
||||||
|
index == 0
|
||||||
|
? 'station-name-first'
|
||||||
|
: index % 2 == 1
|
||||||
|
? 'station-name-down'
|
||||||
|
: 'station-name-up'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ item.value }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="station-list-right">
|
||||||
|
<div
|
||||||
|
class="station-list-right-contain"
|
||||||
|
v-for="(item, index) in stationListRightOption"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="index < stationListRightOption.length - 1"
|
||||||
|
class="station-list-right-line"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="station-list-right-box"
|
||||||
|
:class="{
|
||||||
|
active: clickStationListRightName == item,
|
||||||
|
}"
|
||||||
|
@click="clickStationListRighrOrOcc(item)"
|
||||||
|
/>
|
||||||
|
<div class="station-list-right-box-text">
|
||||||
|
{{ item }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<q-resize-observer @resize="onHeaderResize" />
|
<q-resize-observer @resize="onHeaderResize" />
|
||||||
</q-header>
|
</q-header>
|
||||||
|
|
||||||
@ -157,7 +244,7 @@
|
|||||||
import DrawProperties from 'src/components/draw-app/IscsDrawProperties.vue';
|
import DrawProperties from 'src/components/draw-app/IscsDrawProperties.vue';
|
||||||
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
|
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
import { useQuasar } from 'quasar';
|
import { date, useQuasar } from 'quasar';
|
||||||
import { useDrawStore } from 'src/stores/draw-store';
|
import { useDrawStore } from 'src/stores/draw-store';
|
||||||
import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
|
import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
|
||||||
import { Arrow } from 'src/graphics/arrow/Arrow';
|
import { Arrow } from 'src/graphics/arrow/Arrow';
|
||||||
@ -248,6 +335,7 @@ onMounted(() => {
|
|||||||
console.log('绘制应用layout mounted');
|
console.log('绘制应用layout mounted');
|
||||||
const dom = document.getElementById('draw-app-container');
|
const dom = document.getElementById('draw-app-container');
|
||||||
initMunuOption();
|
initMunuOption();
|
||||||
|
intervalId = setInterval(updateTime, 1000);
|
||||||
if (dom) {
|
if (dom) {
|
||||||
drawStore.setDraftId(+route.params.id as number);
|
drawStore.setDraftId(+route.params.id as number);
|
||||||
const drawApp = drawStore.initDrawApp();
|
const drawApp = drawStore.initDrawApp();
|
||||||
@ -255,7 +343,6 @@ onMounted(() => {
|
|||||||
drawApp.reload();
|
drawApp.reload();
|
||||||
const _record = drawApp.opRecord.record;
|
const _record = drawApp.opRecord.record;
|
||||||
drawApp.opRecord.record = function (op) {
|
drawApp.opRecord.record = function (op) {
|
||||||
console.log(op, '---', drawApp);
|
|
||||||
handleRecordData(op);
|
handleRecordData(op);
|
||||||
_record.call(drawApp.opRecord, op);
|
_record.call(drawApp.opRecord, op);
|
||||||
};
|
};
|
||||||
@ -356,18 +443,21 @@ async function saveAs(name: string) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function forceReloadDate() {
|
//日期
|
||||||
const drawApp = drawStore.getDrawApp();
|
let intervalId = null;
|
||||||
const graphics = drawApp.queryStore.getAllGraphics();
|
const currentData = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
|
||||||
graphics.forEach((graphic) => (graphic.visible = false));
|
const currentTime = ref(date.formatDate(new Date(), 'HH:mm:ss'));
|
||||||
drawApp.updateSelected();
|
|
||||||
drawApp.forceReload();
|
const updateTime = () => {
|
||||||
}
|
currentData.value = date.formatDate(new Date(), 'YYYY-MM-DD');
|
||||||
|
currentTime.value = date.formatDate(new Date(), 'HH:mm:ss');
|
||||||
|
};
|
||||||
|
|
||||||
//目录车站切换
|
//目录车站切换
|
||||||
const selectMenuName = ref('');
|
const selectMenuName = ref('');
|
||||||
let menuOption = [];
|
let menuOption = [];
|
||||||
function selectedMenu(menuName: string) {
|
function selectedMenu(menuName: string) {
|
||||||
|
selectMenuName.value = menuName;
|
||||||
for (let i = 0; i < iscsTypeConfig.length; i++) {
|
for (let i = 0; i < iscsTypeConfig.length; i++) {
|
||||||
if (iscsTypeConfig[i].menuName == menuName) {
|
if (iscsTypeConfig[i].menuName == menuName) {
|
||||||
subMenuOption.value = iscsTypeConfig[i].sunMenu.map((sunMenu) => {
|
subMenuOption.value = iscsTypeConfig[i].sunMenu.map((sunMenu) => {
|
||||||
@ -387,18 +477,29 @@ function selectedSubMenu(subName: string) {
|
|||||||
forceReloadDate();
|
forceReloadDate();
|
||||||
}
|
}
|
||||||
|
|
||||||
let iscsTypeConfig: { menuName: string; sunMenu: { sunMenuName: string }[] }[] =
|
let iscsTypeConfig: {
|
||||||
[];
|
menuName: string;
|
||||||
|
icon: string;
|
||||||
|
activeIcon: string;
|
||||||
|
sunMenu: { sunMenuName: string }[];
|
||||||
|
}[] = [];
|
||||||
function initMunuOption() {
|
function initMunuOption() {
|
||||||
iscsTypeConfig = getIscsStyleConfig(route.query.iscsStyle as IscsStyle);
|
iscsTypeConfig = getIscsStyleConfig(route.query.iscsStyle as IscsStyle);
|
||||||
menuOption = iscsTypeConfig.map((menu) => {
|
menuOption = iscsTypeConfig.map((menu) => {
|
||||||
return { label: menu.menuName, value: menu.menuName };
|
return {
|
||||||
|
label: menu.menuName,
|
||||||
|
value: menu.menuName,
|
||||||
|
icon: menu.icon,
|
||||||
|
activeIcon: menu.activeIcon,
|
||||||
|
};
|
||||||
});
|
});
|
||||||
selectMenuName.value = menuOption[0].value;
|
selectMenuName.value = menuOption[0].value;
|
||||||
subMenuOption.value = iscsTypeConfig[0].sunMenu.map((sunMenu) => {
|
subMenuOption.value = iscsTypeConfig[0].sunMenu.map((sunMenu) => {
|
||||||
return { label: sunMenu.sunMenuName, value: sunMenu.sunMenuName };
|
return { label: sunMenu.sunMenuName, value: sunMenu.sunMenuName };
|
||||||
});
|
});
|
||||||
selectSubMenuName.value = subMenuOption.value[0].value;
|
selectSubMenuName.value = subMenuOption.value[0].value;
|
||||||
|
drawStore.selectSubmenuAndStation.submenu = selectSubMenuName.value;
|
||||||
|
drawStore.selectSubmenuAndStation.station = stationOption[0].value;
|
||||||
}
|
}
|
||||||
|
|
||||||
const selectStationName = ref('会展中心');
|
const selectStationName = ref('会展中心');
|
||||||
@ -406,14 +507,26 @@ const stationOption = [
|
|||||||
{ label: '会展中心', value: '会展中心' },
|
{ label: '会展中心', value: '会展中心' },
|
||||||
{ label: '火车站', value: '火车站' },
|
{ label: '火车站', value: '火车站' },
|
||||||
{ label: '丈八一路', value: '丈八一路' },
|
{ label: '丈八一路', value: '丈八一路' },
|
||||||
|
{ label: '会展中心', value: '会展中心' },
|
||||||
|
{ label: '火车站', value: '火车站' },
|
||||||
|
{ label: '丈八一路', value: '丈八一路' },
|
||||||
|
{ label: '会展中心', value: '会展中心' },
|
||||||
|
{ label: '火车站', value: '火车站' },
|
||||||
|
{ label: '丈八一路', value: '丈八一路' },
|
||||||
|
{ label: '会展中心', value: '会展中心' },
|
||||||
|
{ label: '火车站', value: '火车站' },
|
||||||
|
{ label: '丈八一路', value: '丈八一路' },
|
||||||
|
{ label: '会展中心', value: '会展中心' },
|
||||||
|
{ label: '火车站', value: '火车站' },
|
||||||
|
{ label: '丈八一路', value: '丈八一路' },
|
||||||
];
|
];
|
||||||
function selectedStation(name: string) {
|
function selectedStation(name: string) {
|
||||||
|
selectStationName.value = name;
|
||||||
drawStore.selectSubmenuAndStation.station = name;
|
drawStore.selectSubmenuAndStation.station = name;
|
||||||
forceReloadDate();
|
forceReloadDate();
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleRecordData(op) {
|
function handleRecordData(op) {
|
||||||
console.log('handleRecordData', op, op.type);
|
|
||||||
const drawApp = drawStore.getDrawApp();
|
const drawApp = drawStore.getDrawApp();
|
||||||
const syncData = {
|
const syncData = {
|
||||||
operationType: op.type,
|
operationType: op.type,
|
||||||
@ -435,10 +548,260 @@ function handleRecordData(op) {
|
|||||||
'/rtss_simulation/draft/iscs/7',
|
'/rtss_simulation/draft/iscs/7',
|
||||||
new sync_data_message.SyncData({ ...syncData }).serialize()
|
new sync_data_message.SyncData({ ...syncData }).serialize()
|
||||||
);
|
);
|
||||||
console.log(syncData, 'syncData');
|
}
|
||||||
|
function forceReloadDate() {
|
||||||
|
const drawApp = drawStore.getDrawApp();
|
||||||
|
const graphics = drawApp.queryStore.getAllGraphics();
|
||||||
|
graphics.forEach((graphic) => (graphic.visible = false));
|
||||||
|
drawApp.updateSelected();
|
||||||
|
drawApp.forceReload();
|
||||||
|
}
|
||||||
|
|
||||||
|
const clickOCC = ref(false);
|
||||||
|
function clickOCCFn() {
|
||||||
|
clickOCC.value = !clickOCC.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
const clickStationListRightName = ref('');
|
||||||
|
const stationListRightOption = [
|
||||||
|
'车辆段',
|
||||||
|
'火车南主所',
|
||||||
|
'皂角树主所',
|
||||||
|
'红星停车场',
|
||||||
|
'香山主所',
|
||||||
|
];
|
||||||
|
|
||||||
|
function clickStationListRighrOrOcc(buttonLabel: string) {
|
||||||
|
clickStationListRightName.value = buttonLabel;
|
||||||
}
|
}
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
drawStore.destroy();
|
drawStore.destroy();
|
||||||
|
clearInterval(intervalId);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.top-menu {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 40px;
|
||||||
|
background-color: #1473a3;
|
||||||
|
.top-menu-left {
|
||||||
|
width: 80px;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.top-menu-middle {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding-left: 150px;
|
||||||
|
.data-margin {
|
||||||
|
margin-right: 80px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top-menu-right {
|
||||||
|
min-width: 80px;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu-nav {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
background-image: linear-gradient(to bottom, #616567, #424548);
|
||||||
|
.menu-nav-leftTxet {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 140px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
.menu-nav-right {
|
||||||
|
display: flex;
|
||||||
|
.menu-nav-contain {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
.menu-nav-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
.menu-nav-text {
|
||||||
|
width: 90px;
|
||||||
|
margin-top: 28px;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.menu-nav-text.active {
|
||||||
|
color: #4fb6ec;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.subMenu-nav {
|
||||||
|
background-color: #5c6163;
|
||||||
|
.menu-nav-leftTxet {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 140px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.station-nav {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 65px;
|
||||||
|
background-color: #b7e7fe;
|
||||||
|
.station-list-left {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
width: 4vw;
|
||||||
|
background-color: #61cbff;
|
||||||
|
.station-list-left-box {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 1vw;
|
||||||
|
height: 1vw;
|
||||||
|
border-radius: 1vw;
|
||||||
|
background: radial-gradient(circle, #aaabae, #717171);
|
||||||
|
border-left: 1px #fdfdfd solid;
|
||||||
|
border-right: 1px #262626 solid;
|
||||||
|
}
|
||||||
|
.station-list-left-box.active {
|
||||||
|
background: radial-gradient(circle, #43f5fa, #1f88be);
|
||||||
|
}
|
||||||
|
.station-list-left-text {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 4px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.station-list {
|
||||||
|
width: 82%;
|
||||||
|
height: 100%;
|
||||||
|
.station-list-contain {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 96%;
|
||||||
|
height: 100%;
|
||||||
|
margin-left: 2%;
|
||||||
|
.station-line {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 12px;
|
||||||
|
background-image: linear-gradient(to bottom, #9c9c9c, #f0f0f0, #9c9c9c);
|
||||||
|
top: 25px;
|
||||||
|
border: 1px #505050 solid;
|
||||||
|
}
|
||||||
|
.station-box-contain {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
.station-box {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 1vw;
|
||||||
|
margin-top: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
.station-list-box {
|
||||||
|
position: absolute;
|
||||||
|
width: 1vw;
|
||||||
|
height: 1vw;
|
||||||
|
border-radius: 1vw;
|
||||||
|
top: 10px;
|
||||||
|
background: radial-gradient(circle, #aaabae, #717171);
|
||||||
|
border-left: 1px #fdfdfd solid;
|
||||||
|
border-right: 1px #262626 solid;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
.station-list-box.active {
|
||||||
|
background: radial-gradient(circle, #43f5fa, #1f88be);
|
||||||
|
}
|
||||||
|
.station-list-box.left {
|
||||||
|
left: -2px;
|
||||||
|
}
|
||||||
|
.station-list-box.right {
|
||||||
|
left: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.station-name {
|
||||||
|
color: black;
|
||||||
|
font-size: 12px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.station-name-first {
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: 5px;
|
||||||
|
white-space: nowrap;
|
||||||
|
left: 0%;
|
||||||
|
}
|
||||||
|
.station-name-up {
|
||||||
|
top: 5px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
left: 25%;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.station-name-down {
|
||||||
|
top: 45px;
|
||||||
|
transform: translateX(-25%);
|
||||||
|
white-space: nowrap;
|
||||||
|
left: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.station-list-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 14vw;
|
||||||
|
background-color: #61cbff;
|
||||||
|
.station-list-right-contain {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
.station-list-right-line {
|
||||||
|
position: absolute;
|
||||||
|
left: 90%;
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #aaabae;
|
||||||
|
}
|
||||||
|
.station-list-right-box {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 1vw;
|
||||||
|
height: 1vw;
|
||||||
|
border-radius: 1vw;
|
||||||
|
background: radial-gradient(circle, #aaabae, #717171);
|
||||||
|
border-left: 1px #fdfdfd solid;
|
||||||
|
border-right: 1px #262626 solid;
|
||||||
|
}
|
||||||
|
.station-list-right-box-text {
|
||||||
|
position: relative;
|
||||||
|
width: 3em;
|
||||||
|
margin-top: 28px;
|
||||||
|
word-break: break-all;
|
||||||
|
white-space: normal;
|
||||||
|
color: black;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.station-list-right-box.active {
|
||||||
|
background: radial-gradient(circle, #43f5fa, #1f88be);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
@ -12,6 +12,7 @@ export namespace sync_data_message {
|
|||||||
datas?: UpdataData[];
|
datas?: UpdataData[];
|
||||||
submenu?: string;
|
submenu?: string;
|
||||||
station?: string;
|
station?: string;
|
||||||
|
userId?: number;
|
||||||
}) {
|
}) {
|
||||||
super();
|
super();
|
||||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2], this.#one_of_decls);
|
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2], this.#one_of_decls);
|
||||||
@ -28,6 +29,9 @@ export namespace sync_data_message {
|
|||||||
if ("station" in data && data.station != undefined) {
|
if ("station" in data && data.station != undefined) {
|
||||||
this.station = data.station;
|
this.station = data.station;
|
||||||
}
|
}
|
||||||
|
if ("userId" in data && data.userId != undefined) {
|
||||||
|
this.userId = data.userId;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
get operationType() {
|
get operationType() {
|
||||||
@ -54,11 +58,18 @@ export namespace sync_data_message {
|
|||||||
set station(value: string) {
|
set station(value: string) {
|
||||||
pb_1.Message.setField(this, 4, value);
|
pb_1.Message.setField(this, 4, value);
|
||||||
}
|
}
|
||||||
|
get userId() {
|
||||||
|
return pb_1.Message.getFieldWithDefault(this, 5, 0) as number;
|
||||||
|
}
|
||||||
|
set userId(value: number) {
|
||||||
|
pb_1.Message.setField(this, 5, value);
|
||||||
|
}
|
||||||
static fromObject(data: {
|
static fromObject(data: {
|
||||||
operationType?: string;
|
operationType?: string;
|
||||||
datas?: ReturnType<typeof UpdataData.prototype.toObject>[];
|
datas?: ReturnType<typeof UpdataData.prototype.toObject>[];
|
||||||
submenu?: string;
|
submenu?: string;
|
||||||
station?: string;
|
station?: string;
|
||||||
|
userId?: number;
|
||||||
}): SyncData {
|
}): SyncData {
|
||||||
const message = new SyncData({});
|
const message = new SyncData({});
|
||||||
if (data.operationType != null) {
|
if (data.operationType != null) {
|
||||||
@ -73,6 +84,9 @@ export namespace sync_data_message {
|
|||||||
if (data.station != null) {
|
if (data.station != null) {
|
||||||
message.station = data.station;
|
message.station = data.station;
|
||||||
}
|
}
|
||||||
|
if (data.userId != null) {
|
||||||
|
message.userId = data.userId;
|
||||||
|
}
|
||||||
return message;
|
return message;
|
||||||
}
|
}
|
||||||
toObject() {
|
toObject() {
|
||||||
@ -81,6 +95,7 @@ export namespace sync_data_message {
|
|||||||
datas?: ReturnType<typeof UpdataData.prototype.toObject>[];
|
datas?: ReturnType<typeof UpdataData.prototype.toObject>[];
|
||||||
submenu?: string;
|
submenu?: string;
|
||||||
station?: string;
|
station?: string;
|
||||||
|
userId?: number;
|
||||||
} = {};
|
} = {};
|
||||||
if (this.operationType != null) {
|
if (this.operationType != null) {
|
||||||
data.operationType = this.operationType;
|
data.operationType = this.operationType;
|
||||||
@ -94,6 +109,9 @@ export namespace sync_data_message {
|
|||||||
if (this.station != null) {
|
if (this.station != null) {
|
||||||
data.station = this.station;
|
data.station = this.station;
|
||||||
}
|
}
|
||||||
|
if (this.userId != null) {
|
||||||
|
data.userId = this.userId;
|
||||||
|
}
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
serialize(): Uint8Array;
|
serialize(): Uint8Array;
|
||||||
@ -108,6 +126,8 @@ export namespace sync_data_message {
|
|||||||
writer.writeString(3, this.submenu);
|
writer.writeString(3, this.submenu);
|
||||||
if (this.station.length)
|
if (this.station.length)
|
||||||
writer.writeString(4, this.station);
|
writer.writeString(4, this.station);
|
||||||
|
if (this.userId != 0)
|
||||||
|
writer.writeUint32(5, this.userId);
|
||||||
if (!w)
|
if (!w)
|
||||||
return writer.getResultBuffer();
|
return writer.getResultBuffer();
|
||||||
}
|
}
|
||||||
@ -129,6 +149,9 @@ export namespace sync_data_message {
|
|||||||
case 4:
|
case 4:
|
||||||
message.station = reader.readString();
|
message.station = reader.readString();
|
||||||
break;
|
break;
|
||||||
|
case 5:
|
||||||
|
message.userId = reader.readUint32();
|
||||||
|
break;
|
||||||
default: reader.skipField();
|
default: reader.skipField();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -20,7 +20,7 @@ export const useDrawStore = defineStore('draw', {
|
|||||||
selectedGraphics: null as JlGraphic[] | null,
|
selectedGraphics: null as JlGraphic[] | null,
|
||||||
draftId: null as number | null,
|
draftId: null as number | null,
|
||||||
drawPictureType: null as PictureType | null,
|
drawPictureType: null as PictureType | null,
|
||||||
selectSubmenuAndStation: { submenu: '站台报警', station: '会展中心' },
|
selectSubmenuAndStation: { submenu: '', station: '' },
|
||||||
}),
|
}),
|
||||||
getters: {
|
getters: {
|
||||||
drawMode: (state) => state.drawAssistant != null,
|
drawMode: (state) => state.drawAssistant != null,
|
||||||
@ -100,11 +100,7 @@ export const useDrawStore = defineStore('draw', {
|
|||||||
// console.log('绘制状态清空,绘制应用销毁');
|
// console.log('绘制状态清空,绘制应用销毁');
|
||||||
this.drawAssistant = null;
|
this.drawAssistant = null;
|
||||||
this.selectedGraphics = null;
|
this.selectedGraphics = null;
|
||||||
(this.selectSubmenuAndStation = {
|
destroyIscsDrawApp();
|
||||||
submenu: '站台报警',
|
|
||||||
station: '会展中心',
|
|
||||||
}),
|
|
||||||
destroyIscsDrawApp();
|
|
||||||
},
|
},
|
||||||
setDraftId(id: number | null) {
|
setDraftId(id: number | null) {
|
||||||
this.draftId = id;
|
this.draftId = id;
|
||||||
|
Loading…
Reference in New Issue
Block a user