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 = [
|
||||
{
|
||||
menuName: '火灾报警',
|
||||
sunMenu: [
|
||||
{ sunMenuName: '站台报警' },
|
||||
{ sunMenuName: '站厅报警' },
|
||||
{ sunMenuName: '系统状态' },
|
||||
],
|
||||
},
|
||||
{
|
||||
menuName: '机电',
|
||||
sunMenu: [
|
||||
{ sunMenuName: '大系统' },
|
||||
{ sunMenuName: '小系统' },
|
||||
{ sunMenuName: '水系统' },
|
||||
{ sunMenuName: '照明' },
|
||||
{ sunMenuName: '电、扶梯' },
|
||||
{ sunMenuName: '给排水' },
|
||||
{ sunMenuName: '模式' },
|
||||
{ sunMenuName: '隧道通风' },
|
||||
{ sunMenuName: '时间表' },
|
||||
{ sunMenuName: '权限交接' },
|
||||
{ sunMenuName: '传感器' },
|
||||
{ sunMenuName: '车站网络' },
|
||||
],
|
||||
},
|
||||
{
|
||||
menuName: '广播',
|
||||
menuName: 'Plan',
|
||||
icon: 'svguse:../iscsMenuIcon.svg#icon-Plan',
|
||||
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-Plan-active',
|
||||
sunMenu: [{ sunMenuName: '子目录' }],
|
||||
},
|
||||
{
|
||||
menuName: '乘客信息',
|
||||
menuName: 'PSCADA',
|
||||
icon: 'svguse:../iscsMenuIcon.svg#icon-PSCADA',
|
||||
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PSCADA-active',
|
||||
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: [
|
||||
{ sunMenuName: '车站控制' },
|
||||
{ sunMenuName: '车站时序' },
|
||||
{ sunMenuName: '车站时序编辑' },
|
||||
{ sunMenuName: '车站设备状态' },
|
||||
{ sunMenuName: '设备分区图' },
|
||||
{ sunMenuName: '火灾报警平面图' },
|
||||
{ sunMenuName: 'FAS气灭系统图' },
|
||||
],
|
||||
},
|
||||
{
|
||||
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: '屏蔽门' }],
|
||||
},
|
||||
{
|
||||
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: '子目录' }],
|
||||
},
|
||||
{
|
||||
menuName: '门禁',
|
||||
menuName: 'PA',
|
||||
icon: 'svguse:../iscsMenuIcon.svg#icon-PA',
|
||||
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PA-active',
|
||||
sunMenu: [{ sunMenuName: '子目录' }],
|
||||
},
|
||||
{
|
||||
menuName: '防淹门',
|
||||
menuName: 'SIG/RAD',
|
||||
icon: 'svguse:../iscsMenuIcon.svg#icon-SIG/RAD',
|
||||
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-SIG/RAD-active',
|
||||
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: '子目录' }],
|
||||
},
|
||||
];
|
||||
|
@ -161,7 +161,7 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
|
||||
let canvasProperty;
|
||||
|
||||
switch (drawStore.selectSubmenuAndStation.submenu) {
|
||||
case '站台报警':
|
||||
case '火灾报警平面图':
|
||||
for (let i = 0; i < storage.fasPlatformAlarmStorages.length; i++) {
|
||||
const fasPlatformAlarm = storage.fasPlatformAlarmStorages[i];
|
||||
if (
|
||||
@ -174,7 +174,7 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
|
||||
}
|
||||
}
|
||||
break;
|
||||
case '车站控制':
|
||||
case '监控布局图':
|
||||
for (let i = 0; i < storage.cctvOfStationControlStorages.length; i++) {
|
||||
const ctvOfStationControl = storage.cctvOfStationControlStorages[i];
|
||||
if (
|
||||
@ -231,7 +231,7 @@ export function saveDrawDatas(app: IDrawApp) {
|
||||
);
|
||||
}
|
||||
switch (drawStore.selectSubmenuAndStation.submenu) {
|
||||
case '站台报警':
|
||||
case '火灾报警平面图':
|
||||
for (let i = 0; i < storage.fasPlatformAlarmStorages.length; i++) {
|
||||
const asPlatformAlarm = storage.fasPlatformAlarmStorages[i];
|
||||
if (
|
||||
@ -247,7 +247,7 @@ export function saveDrawDatas(app: IDrawApp) {
|
||||
}
|
||||
}
|
||||
break;
|
||||
case '车站控制':
|
||||
case '监控布局图':
|
||||
for (let i = 0; i < storage.cctvOfStationControlStorages.length; i++) {
|
||||
const cctvOfStationControl = storage.cctvOfStationControlStorages[i];
|
||||
if (
|
||||
|
@ -1,34 +1,13 @@
|
||||
<template>
|
||||
<q-layout view="hHh LpR fFf">
|
||||
<q-header reveal class="bg-primary text-white">
|
||||
<q-toolbar class="q-pa-sm">
|
||||
<q-toolbar-title class="q-gutter-sm">
|
||||
<div>
|
||||
<span class="q-pa-sm">地铁站</span>
|
||||
<q-btn-toggle
|
||||
v-model="selectMenuName"
|
||||
toggle-color="orange"
|
||||
:options="menuOption"
|
||||
@update:model-value="selectedMenu"
|
||||
/>
|
||||
<q-header class="bg-primary text-white">
|
||||
<div class="top-menu">
|
||||
<div class="top-menu-left">成都地铁</div>
|
||||
<div class="top-menu-middle">
|
||||
<span class="data-margin">{{ currentData }}</span>
|
||||
<span class="data-margin">{{ currentTime }}</span>
|
||||
</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">
|
||||
<div class="top-menu-right">
|
||||
<q-btn color="accent" label="功能菜单">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px">
|
||||
@ -69,7 +48,115 @@
|
||||
<q-btn color="info" label="返回" @click="backConfirm" />
|
||||
<q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
|
||||
</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-header>
|
||||
|
||||
@ -157,7 +244,7 @@
|
||||
import DrawProperties from 'src/components/draw-app/IscsDrawProperties.vue';
|
||||
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { date, useQuasar } from 'quasar';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
|
||||
import { Arrow } from 'src/graphics/arrow/Arrow';
|
||||
@ -248,6 +335,7 @@ onMounted(() => {
|
||||
console.log('绘制应用layout mounted');
|
||||
const dom = document.getElementById('draw-app-container');
|
||||
initMunuOption();
|
||||
intervalId = setInterval(updateTime, 1000);
|
||||
if (dom) {
|
||||
drawStore.setDraftId(+route.params.id as number);
|
||||
const drawApp = drawStore.initDrawApp();
|
||||
@ -255,7 +343,6 @@ onMounted(() => {
|
||||
drawApp.reload();
|
||||
const _record = drawApp.opRecord.record;
|
||||
drawApp.opRecord.record = function (op) {
|
||||
console.log(op, '---', drawApp);
|
||||
handleRecordData(op);
|
||||
_record.call(drawApp.opRecord, op);
|
||||
};
|
||||
@ -356,18 +443,21 @@ async function saveAs(name: string) {
|
||||
}
|
||||
}
|
||||
|
||||
function forceReloadDate() {
|
||||
const drawApp = drawStore.getDrawApp();
|
||||
const graphics = drawApp.queryStore.getAllGraphics();
|
||||
graphics.forEach((graphic) => (graphic.visible = false));
|
||||
drawApp.updateSelected();
|
||||
drawApp.forceReload();
|
||||
}
|
||||
//日期
|
||||
let intervalId = null;
|
||||
const currentData = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
|
||||
const currentTime = ref(date.formatDate(new Date(), 'HH:mm:ss'));
|
||||
|
||||
const updateTime = () => {
|
||||
currentData.value = date.formatDate(new Date(), 'YYYY-MM-DD');
|
||||
currentTime.value = date.formatDate(new Date(), 'HH:mm:ss');
|
||||
};
|
||||
|
||||
//目录车站切换
|
||||
const selectMenuName = ref('');
|
||||
let menuOption = [];
|
||||
function selectedMenu(menuName: string) {
|
||||
selectMenuName.value = menuName;
|
||||
for (let i = 0; i < iscsTypeConfig.length; i++) {
|
||||
if (iscsTypeConfig[i].menuName == menuName) {
|
||||
subMenuOption.value = iscsTypeConfig[i].sunMenu.map((sunMenu) => {
|
||||
@ -387,18 +477,29 @@ function selectedSubMenu(subName: string) {
|
||||
forceReloadDate();
|
||||
}
|
||||
|
||||
let iscsTypeConfig: { menuName: string; sunMenu: { sunMenuName: string }[] }[] =
|
||||
[];
|
||||
let iscsTypeConfig: {
|
||||
menuName: string;
|
||||
icon: string;
|
||||
activeIcon: string;
|
||||
sunMenu: { sunMenuName: string }[];
|
||||
}[] = [];
|
||||
function initMunuOption() {
|
||||
iscsTypeConfig = getIscsStyleConfig(route.query.iscsStyle as IscsStyle);
|
||||
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;
|
||||
subMenuOption.value = iscsTypeConfig[0].sunMenu.map((sunMenu) => {
|
||||
return { label: sunMenu.sunMenuName, value: sunMenu.sunMenuName };
|
||||
});
|
||||
selectSubMenuName.value = subMenuOption.value[0].value;
|
||||
drawStore.selectSubmenuAndStation.submenu = selectSubMenuName.value;
|
||||
drawStore.selectSubmenuAndStation.station = stationOption[0].value;
|
||||
}
|
||||
|
||||
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: '丈八一路' },
|
||||
];
|
||||
function selectedStation(name: string) {
|
||||
selectStationName.value = name;
|
||||
drawStore.selectSubmenuAndStation.station = name;
|
||||
forceReloadDate();
|
||||
}
|
||||
|
||||
function handleRecordData(op) {
|
||||
console.log('handleRecordData', op, op.type);
|
||||
const drawApp = drawStore.getDrawApp();
|
||||
const syncData = {
|
||||
operationType: op.type,
|
||||
@ -435,10 +548,260 @@ function handleRecordData(op) {
|
||||
'/rtss_simulation/draft/iscs/7',
|
||||
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(() => {
|
||||
drawStore.destroy();
|
||||
clearInterval(intervalId);
|
||||
});
|
||||
</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[];
|
||||
submenu?: string;
|
||||
station?: string;
|
||||
userId?: number;
|
||||
}) {
|
||||
super();
|
||||
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) {
|
||||
this.station = data.station;
|
||||
}
|
||||
if ("userId" in data && data.userId != undefined) {
|
||||
this.userId = data.userId;
|
||||
}
|
||||
}
|
||||
}
|
||||
get operationType() {
|
||||
@ -54,11 +58,18 @@ export namespace sync_data_message {
|
||||
set station(value: string) {
|
||||
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: {
|
||||
operationType?: string;
|
||||
datas?: ReturnType<typeof UpdataData.prototype.toObject>[];
|
||||
submenu?: string;
|
||||
station?: string;
|
||||
userId?: number;
|
||||
}): SyncData {
|
||||
const message = new SyncData({});
|
||||
if (data.operationType != null) {
|
||||
@ -73,6 +84,9 @@ export namespace sync_data_message {
|
||||
if (data.station != null) {
|
||||
message.station = data.station;
|
||||
}
|
||||
if (data.userId != null) {
|
||||
message.userId = data.userId;
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
@ -81,6 +95,7 @@ export namespace sync_data_message {
|
||||
datas?: ReturnType<typeof UpdataData.prototype.toObject>[];
|
||||
submenu?: string;
|
||||
station?: string;
|
||||
userId?: number;
|
||||
} = {};
|
||||
if (this.operationType != null) {
|
||||
data.operationType = this.operationType;
|
||||
@ -94,6 +109,9 @@ export namespace sync_data_message {
|
||||
if (this.station != null) {
|
||||
data.station = this.station;
|
||||
}
|
||||
if (this.userId != null) {
|
||||
data.userId = this.userId;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
@ -108,6 +126,8 @@ export namespace sync_data_message {
|
||||
writer.writeString(3, this.submenu);
|
||||
if (this.station.length)
|
||||
writer.writeString(4, this.station);
|
||||
if (this.userId != 0)
|
||||
writer.writeUint32(5, this.userId);
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
@ -129,6 +149,9 @@ export namespace sync_data_message {
|
||||
case 4:
|
||||
message.station = reader.readString();
|
||||
break;
|
||||
case 5:
|
||||
message.userId = reader.readUint32();
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
|
@ -20,7 +20,7 @@ export const useDrawStore = defineStore('draw', {
|
||||
selectedGraphics: null as JlGraphic[] | null,
|
||||
draftId: null as number | null,
|
||||
drawPictureType: null as PictureType | null,
|
||||
selectSubmenuAndStation: { submenu: '站台报警', station: '会展中心' },
|
||||
selectSubmenuAndStation: { submenu: '', station: '' },
|
||||
}),
|
||||
getters: {
|
||||
drawMode: (state) => state.drawAssistant != null,
|
||||
@ -100,10 +100,6 @@ export const useDrawStore = defineStore('draw', {
|
||||
// console.log('绘制状态清空,绘制应用销毁');
|
||||
this.drawAssistant = null;
|
||||
this.selectedGraphics = null;
|
||||
(this.selectSubmenuAndStation = {
|
||||
submenu: '站台报警',
|
||||
station: '会展中心',
|
||||
}),
|
||||
destroyIscsDrawApp();
|
||||
},
|
||||
setDraftId(id: number | null) {
|
||||
|
Loading…
Reference in New Issue
Block a user