This commit is contained in:
joylink_fanyuhong 2024-10-08 17:40:25 +08:00
commit 53335d35ba
6 changed files with 670 additions and 91 deletions

147
public/iscsMenuIcon.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 67 KiB

View File

@ -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: '子目录' }],
},
];

View File

@ -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 (

View File

@ -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"
/>
</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-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 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>

View File

@ -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();
}
}

View File

@ -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,11 +100,7 @@ export const useDrawStore = defineStore('draw', {
// console.log('绘制状态清空,绘制应用销毁');
this.drawAssistant = null;
this.selectedGraphics = null;
(this.selectSubmenuAndStation = {
submenu: '站台报警',
station: '会展中心',
}),
destroyIscsDrawApp();
destroyIscsDrawApp();
},
setDraftId(id: number | null) {
this.draftId = id;